CSS关键帧动画出现意外行为

Question

我试图在页面加载时从0开始向上扩展元素，但是该元素需要旋转。看起来像一个简单的事情，但似乎在动画结束后应用旋转：

@-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/

Answer 1

您需要在transform规则的范围内使用@keyframes缩写，因为您的rotate()函数不在规则范围内，因此不会像您预期的那样制作动画。

http://jsfiddle.net/wnpVp/3