I'm using the validator (https://validator.ampproject.org/) to convert my page's invalid css to AMP friendly, according to the website (https://www.ampproject.org/docs/guides/responsive/style_pages) transition is limited to only opacity and transform. Yet I have color animations all over the css, the validator doesn't seem to care about them.
Is the validator incorrect or outdated? Has anyone else run into this? Perhaps AMP allows color transitions now? Thanks!
Ex snippet from my code:
<style amp-custom>
a {
background-color: transparent;
color: #1274b8;
text-decoration: none;
cursor: pointer;
transition: color .25s ease-out, background-color .25s ease-out; //this is valid and passing
}
a:hover {
color: purple;
}
</style>
Related
Im trying to put an animation to scale a angular mat-card on hover.
I have it scaling and doing an ease-in transition.
But i cannot seem to get it to ease out after finished hovering. The card just snaps back to its original size immediately.
Can anyone give a pointer on what i'm missing?
Here is the SCSS I have so far in src/app/styles.scss:
.mat-card {
color: white;
background-color: #2f3441;
opacity: .70;
border-radius: 10px;
&:hover {
transition: all 300ms ease-in;
transform: scale(1.02);
opacity: 1;
border-radius: 10px;
}
&:hover::after {
transition: all 300ms ease-out;
}
}
I have tried placing the ease-out inside the .mat-card but that didnt have any effect either.
Update:
Following the post here CSS Transition - eases in but doesn't ease out? I changed my code to be:
.mat-card {
color: white;
background-color: #2f3441;
opacity: .70;
transition: all 300ms ease-in-out;
}
.mat-card:hover {
transform: scale(1.02);
opacity: 1;
}
The CSS of my original post was inside my styles.scss file, because I want it applied to all cards in the app, but doing the above made the transition effect stop working entirely.
It wasn't until i moved the css into the components .scss file itself that it finally began to transition in and out. src/app/pages/mycomponent/mycomponent.scss
So, why would the transition not work when added to my apps global styles.scss file, but work when added specifically to the components?
Sorry for submitting an answer instead of putting a comment, is just that I don't have enough reputation yet.
Your SCSS should look something like this:
.mat-card {
color: white;
background-color: #2f3441;
opacity: .70;
border-radius: 10px;
transition: all 300ms ease-out;
&:hover {
transition: all 300ms ease-in;
transform: scale(1.02);
opacity: 1;
border-radius: 10px;
}
}
The issue was that you're trying to put the ease-out on the :after of your mat-card which will basically do nothing due to that the :after selector is for the content within that certain HTML tag.
Hope this helps!
I'm getting this weird css bug. It almost seems like a caching issue or something with chrome as I can't replicate locally.
I send the user an invite and if they go to the invite page and then return to any other page that shows the banner, it's displayed wrong as one line of text is in times new roman.
The bug only happens if you've not been to the site before and you go to invite page then click back to any other page that has the banner.
2 things I've noted that are really unusual and I'm struggling to understand are:
The text that is displaying incorrectly is one word in an <a>
element, but parts of the text are fine.
When I open inspector and toggle any part of the css for the element.
It resets to how it should look immediately.
Here are some pictures:
How the banner looks
How it usually/should look
The <a> tag containing the button
As a sidenote I'm using chrome and rails 4 without turbolinks. Here is the code for the button:
.childminder-banner .btn {
padding: 3px 1em;
}
.btn-blue {
background: #34A9CD;
color: white;
}
.btn {
color: white;
-webkit-transition: none .1s ease-out 0s;
transition: none .1s ease-out 0s;
-webkit-transition-property: color,background,border;
transition-property: color,background,border;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
position: relative;
display: inline-block;
line-height: 1.5;
font-family: "Gordita";
font-weight: 500;
border-radius: 3px;
cursor: pointer;
text-align: center;
-webkit-transition: border-color .1s ease-out,background-color .1s ease-out,color .1s ease-out;
transition: border-color .1s ease-out,background-color .1s ease-out,color .1s ease-out;
background-color: #FF8027;
border-color: #FF8027;
}
Give style to the anchor tag display:inline-block
a{
display:inline-block;
}
This pretty simple JSFiddle (http://jsfiddle.net/AndyMP/sj2Kn/) changes the background colour of a block on 'hover', but how do I get it to fadein/fadeout?
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
}
.block:hover {
background-color: #333;
}
You need to use transition property
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
-webkit-transition: background .5s; /* For webkits */
transition: background .5s;
}
Demo
The property is simple, the first parameter you pass is the property you want to animate, so say you want to animate the height you can pass the height or you can use all as the value if you want to transit all the properties which are transitional, and the next parameter is the time we set for the transition, you can set as 1s, 2s and so on where S stands for seconds.
It's worth noting that the property am using is a short hand property for the following properties
transition-delay: 0s
transition-duration: 0s
transition-property: background
transition-timing-function: ease
Where in the above example we are using the transition-property and transition-duration, default values are used for other properties.
Demo Fiddle
Add transition:background 200ms ease-in; to .block
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
transition:background 200ms ease-in;
}
Where 200ms is the amount of time you wish the fade to take.
The CSS property transition defines you want an animation to take place, the three following parts are the specific property you want to transition (can be set to all), the speed, and the animation timing function.
More on CSS transitions from MDN
CSS transitions, which are part of the CSS3 set of specifications,
provide a way to control animation speed when changing CSS properties.
Instead of having property changes take effect immediately, you can
cause the changes in a property to take place over a period of time.
For example, if you change the color of an element from white to
black, usually the change is instantaneous. With CSS transitions
enabled, changes occur at time intervals that follow an acceleration
curve, all of which can be customized.
JSFIDDLE
.block {
width: 200px;
height: 200px;
border: 1px solid #333;
transition: all 0.25s ease;
-moz-transition: all 0.25s ease;;
-webkit-transition: all 0.25s ease;
}
.block:hover {
background-color: #333;
transition: all 0.25s ease;
-moz-transition: all 0.25s ease;;
-webkit-transition: all 0.25s ease;
}
I'd like to ask if there is a solution for a little inconvenience I've encountered with a dashed links.
To save your time here is an example of my code, upon hovering specifically on a dashed line underneath an actual link it starts blinking immensely and it is not very aesthetically appealing. I'm fairly new into the css so I wonder if there is a mistake in my code.
p {
font-size: 35px;
}
a {
text-decoration: none;
color:#ff0089;
text-decoration: none;
border-bottom-color: #ff0089;
border-bottom-width: 2px;
border-bottom-style: dashed;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
transition:color .2s ease-out, background 1s ease-in;
}
a:hover {
color:#eae327;
background: none;
border-bottom-style: none;
}
http://jsfiddle.net/j86ba/
Much obliged.
It happens because the border disappears on hover - turning of the hover functionality. So then the line reappears making in onHover again... (loop)
The solution I found was to set the color to white (or, whatever your background may be) instead of setting style to none. (I tried setting width to 0, but it had the same effect).
See fiddle
Seems hackish, but it works...
I would add that the probability of a user actually hovering exactly on the line (which triggers this behavior) is unlikely and probably shouldn't worry you. i.e. see comments on the question where people who were actually trying to make it happen couldn't reproduce the issue.
JNF's answer is good or you can hack by using this too in your anchor style :
display: inline-block;
height: 40px;
I have a printer-friendly/PDF image that looks like this:
Okay, simple enough. When hovering over it, however, the background turns gray, as I have my default hyperlinks set to this, for example:
#footer a:hover {
color: white;
background-color: #636363;
-moz-transition: all .6s linear;
-webkit-transition: all .6s linear;
-o-transition: all .6s linear;
transition: all .6s linear;
text-decoration: none;
outline: none;
}
So the question becomes, what css rule can I use on this WordPress domain to stop that background-color from happening? I'd like NO background color when hovering over images. Here's what I've tried:
.printfriendly a:hover img {
background-color: transparent !important;
opacity: 1.0 !important;
}
Among other things, but that just doesn't work. Here is what I see in Firebug:
And when I right-click and "copy html" to that selection, this is the html output:
<div class="printfriendly pf-alignright"><a onclick="window.print();if(typeof(_gaq) !=
'undefined') { _gaq.push(['_trackEvent','PRINTFRIENDLY', 'print', 'NULL']);} return false;"
rel="nofollow" href="http://www.printfriendly.com/print?url=http://www.occupyhln.org/occupy-
hln-hall-of-heroes/"><img alt="Print Friendly" src="http://cdn.printfriendly.com/pf-button-
both.gif" style="border:none;-webkit-box-shadow:none; box-shadow:none;"></a></div>
So I'm pretty much at a loss -- which is happening less and less with CSS, as I'm learning more, experimenting and reading, but any help anybody can offer me as to how to get rid of that background-color when hovering over the print/pdf image would be greatly appreciated! IF need be, there is an example here: http://www.occupyhln.org/occupy-hln-hall-of-heroes/
The background colour is not on the image, but the link itself.
.entry-content a:hover { background: none; }