css - 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

您需要在 @keyframes 规则中使用 transform 简写，作为您的 rotate() 函数超出了规则，因此没有像您预期的那样进行动画处理。

http://jsfiddle.net/wnpVp/3