Simple (?) CSS Animation of Opacity Property
28,354
Solution 1
You don't need colons after from
and to
:
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Solution 2
Change
@keyframes fadein {
from: { opacity: 0; }
to: { opacity: 1; }
}
to
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
Author by
Nathan Rutman
Updated on January 22, 2020Comments
-
Nathan Rutman over 4 years
Ok, I don't get this. I've done CSS3 animations before, but for some reason simply animating the opacity isn't working for me today. Am I missing something silly?
CSS:
@-webkit-keyframes fadein { from: { opacity: 0; } to: { opacity: 1; } } @-moz-keyframes fadein { from: { opacity: 0; } to: { opacity: 1; } } @keyframes fadein { from: { opacity: 0; } to: { opacity: 1; } } #foo { background-color: green; color: white; -webkit-animation: fadein 2s ease-in alternate infinite; -moz-animation: fadein 2s ease-in alternate infinite; animation: fadein 2s ease-in alternate infinite; }
HTML:
<div id="foo">This is Foo!</div>
I've also posted it as a fiddle: http://jsfiddle.net/NRutman/Lcyvy/
Any help would be appreciated.
Thanks, -Nate
-
Nathan Rutman over 11 yearsUgh...I knew it was going to be something small like that. Thank you very much.