CODEWITHSUNDEEP
cssanimationcss-animations
Mild Fuzz
Mild Fuzz

Reputation: 30691

Unexpected behaviour with CSS Keyframe animation

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/

Upvotes: 2

Views: 230

Answers (1)

Adrift
Adrift

Reputation: 59799

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

Upvotes: 2

Related Questions