使用变换编写CSS动画

时间:2012-08-10 17:34:42

标签: css css3 css-transforms css-animations

我想组合两个单独的CSS关键帧动画来使图像振动和旋转(参见http://jsfiddle.net/3zAeZ/)。我认为我遇到的问题是:我在两个关键帧规则中都设置了transform属性,因此有一个规则会破坏另一个规则。

我知道这可以使用top&如果我进行转换(例如,如果我需要以不同的方式定位图像),那么关键帧规则将来会更容易重用(例如,如果我需要以不同的方式定位图像)。

我很难过。我可以这样做吗?我有更好的方法吗?

1 个答案:

答案 0 :(得分:2)

您可以使用多种转换,例如

transform: rotate(1337deg) scale(1.5) translate(6em, 300px);

现在我意识到你需要两个不同的动画持续时间。 所以我能想到的最好的就是使用两个元素http://jsfiddle.net/3zAeZ/1/