如何让两个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/ – 只有一个动画(最后一个动画)播放。
解决方法
这里有两个问题：
#1
-webkit-animation:spin 2s linear infinite; -webkit-animation:scale 4s linear infinite;
最后一句话，取代了第一个。所以没有效果。
#2
两个关键帧应用于相同的属性变换
另一种方法是将图像包裹在< div>并分别以不同的速度对每个进行动画。
http://jsfiddle.net/rnrlabs/x9cu53hp/
.scaler {
position: absolute;
top: 100%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation: scale 4s infinite linear;
}
.spinner {
position: relative;
top: 150px;
-webkit-animation: spin 2s infinite linear;
}
@-webkit-keyframes spin {
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes scale {
100% {
transform: scaleX(2) scaleY(2);
}
}
<div class="spinner"> <img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120"> <div>
