CODEWITHSUNDEEP
cssanimationcss-animations
Nathan Rutman
Nathan Rutman

Reputation: 2255

Simple (?) CSS Animation of Opacity Property

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

Upvotes: 12

Views: 47420

Answers (2)

Pavlo
Pavlo

Reputation: 44917

You don't need colons after from and to:

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

http://jsfiddle.net/Lcyvy/6/

Upvotes: 23

Zoltan Toth
Zoltan Toth

Reputation: 47667

Change

@keyframes fadein {
    from: { opacity: 0; }
    to: { opacity: 1; }
}

to

@keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

DEMO

Upvotes: 9

Related Questions