Unexpected behaviour with CSS Keyframe animation

Question

I am trying to have an element scale up from 0 on page load, but that element needs to be rotated. Seems like a simple thing, but it seems to apply the rotation after the animation finishes:

@-webkit-keyframes scale{
    0%{-webkit-transform: scale(0);}
    100%{-webkit-transform: scale(1);}
}
div{
    -webkit-transform: rotate(30deg);
    -webkit-animation: scale 2s;
}

http://jsfiddle.net/mildfuzz/wnpVp/

or opera, no, you're right. Not sure how that helps, though. — Mild Fuzz
– Mild Fuzz, Commented Jun 19, 2013 at 20:46
in the whole earth didn't you get any other word than scale to name your animation — bugwheels94
– bugwheels94, Commented Jun 19, 2013 at 20:49
What's your point? @Ankit, you seem to either be misunderstanding the problem or being purposely antagonistic. — Mild Fuzz
– Mild Fuzz, Commented Jun 19, 2013 at 20:51
@Ankit I am sure you can handle changing some prefixes if you really can't fire up a webkit browser. As a rule, I always dev for webkit prefixes first, and then add support for others later, to keep code readable. — Mild Fuzz
– Mild Fuzz, Commented Jun 19, 2013 at 20:59

Adrift · Accepted Answer · 2013-06-19 20:55:47Z

2

You need to use the transform shorthand within the @keyframes rule, as your rotate() function is outside the rule and thus not animating like you expected.

http://jsfiddle.net/wnpVp/3

answered Jun 19, 2013 at 20:55

Adrift

60k12 gold badges98 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unexpected behaviour with CSS Keyframe animation

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related