如何让两个 CSS 动画以不同的速度播放?
- 图像应该同时旋转和增长。
- 旋转将每 2 秒循环一次。
- 增长将每 4 秒循环一次。
示例代码:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;
}
@-webkit-keyframes spin {
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes scale {
100% {
transform: scaleX(2) scaleY(2);
}
}
http://jsfiddle.net/Ugc5g/3388/ - 只播放一个动画(最后一个声明的)。
最佳答案
您可以使用逗号指定多个动画——每个动画都有自己的属性。
示例:
animation: rotate 1s, spin 3s;
关于css - 同时播放多个CSS动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45067416/