同时播放多个CSS动画 [英] Play multiple CSS animations at the same time
本文介绍了同时播放多个CSS动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何让两个CSS动画以不同的速度运行
How can I have two CSS animations playing at different speeds?
- 图片应该旋转,生长在同一时间。
- 旋转将每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/ - 只有一个动画(最后一个动画)播放。
http://jsfiddle.net/Ugc5g/3388/ - only one animation (the last one declared) plays.
推荐答案
这里有两个问题:
#1
-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;
最后一句代替第一句。
The last one sentence, replaces the first. So, has no effect.
#2
两个关键帧适用于相同的属性 transform
Both keyframes applies on the same property transform
另一种方法是将图像包装在< div>
An alternative is wrap the image in a <div>
and animate each one separately and at different speeds.
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>
这篇关于同时播放多个CSS动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文