同时播放多个 CSS 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26986129/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play multiple CSS animations at the same time
提问by Don P
How can I have two CSS animations playing at different speeds?
如何以不同的速度播放两个 CSS 动画？
- The image should be rotating and growing at the same time.
- The rotation will cycle every 2 seconds.
- The growth will cycle every 4 seconds.
- 图像应该同时旋转和增长。
- 旋转将每 2 秒循环一次。
- 增长将每 4 秒循环一次。
Example Code:
示例代码：
.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/- only one animation (the last one declared) plays.
http://jsfiddle.net/Ugc5g/3388/- 只播放一个动画（最后一个声明）。
回答by Critical Error
In case anyone new is coming along and catching this thread, you can specify multiple animations--each with their own properties--with a comma.
如果任何新人出现并捕捉到此线程，您可以使用逗号指定多个动画——每个动画都有自己的属性。
Example:
例子：
animation: rotate 1s, spin 3s;
回答by rnrneverdies
TL;DR
TL; 博士
With a comma, you can specify multiple animations each with their own properties.
使用逗号，您可以指定多个动画，每个动画都有自己的属性。
Example:
例子：
animation: rotate 1s, spin 3s;
Original answer
原答案
There are two issues here:
这里有两个问题：
#1
#1
-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;
The second line replaces the first one. So, has no effect.
第二行取代了第一行。所以，没有效果。
#2
#2
Both keyframes applies on the same property transform
两个关键帧适用于同一属性 transform
As an alternative you could to wrap the image in a <div>and animate each one separately and at different speeds.
作为替代方案，您可以将图像包裹在 a 中，<div>并分别以不同的速度为每个图像设置动画。
http://jsfiddle.net/rnrlabs/x9cu53hp/
http://jsfiddle.net/rnrlabs/x9cu53hp/
.scaler {
position: absolute;
top: 100%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
animation: scale 4s infinite linear;
}
.spinner {
position: relative;
top: 150px;
animation: spin 2s infinite linear;
}
@keyframes spin {
100% {
transform: rotate(180deg);
}
}
@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>回答by Ray Waldin
You can indeed run multiple animations simultaneously, but your example has two problems. First, the syntax you use only specifies one animation. The second style rule hides the first. You can specify two animations using syntax like this:
您确实可以同时运行多个动画，但是您的示例有两个问题。首先，您使用的语法仅指定一个动画。第二个样式规则隐藏了第一个。您可以使用如下语法指定两个动画：
-webkit-animation-name: spin, scale
-webkit-animation-duration: 2s, 4s
as in this fiddle (where I replaced "scale" with "fade" due to the other problem explained below... Bear with me.): http://jsfiddle.net/rwaldin/fwk5bqt6/
就像在这个小提琴中一样（由于下面解释的另一个问题，我用“淡入淡出”替换了“比例”……请耐心等待。）：http: //jsfiddle.net/rwaldin/fwk5bqt6/
Second, both of your animations alter the same CSS property (transform) of the same DOM element. I don't believe you can do that. You can specify two animations on different elements, the image and a container element perhaps. Just apply one of the animations to the container, as in this fiddle: http://jsfiddle.net/rwaldin/fwk5bqt6/2/
其次，你的两个动画都改变了同一个 DOM 元素的同一个 CSS 属性（转换）。我不相信你能做到。您可以在不同的元素上指定两个动画，可能是图像和容器元素。只需将其中一个动画应用于容器，就像这个小提琴一样：http: //jsfiddle.net/rwaldin/fwk5bqt6/2/
回答by Vitorino fernandes
you can try something like this
你可以试试这样的
set the parent to rotateand the image to scaleso that the rotateand scaletime can be different
父设置rotate和图像以scale使得rotate和scale时间可以是不同的
div {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
-webkit-animation: spin 2s linear infinite;
}
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin: -60px 0 0 -60px;
-webkit-animation: scale 4s linear infinite;
}
@-webkit-keyframes spin {
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes scale {
100% {
transform: scale(2);
}
}<div>
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120" />
</div>回答by Ram G Athreya
You cannot play two animations since the attribute can be defined only once. Rather why don't you include the second animation in the first and adjust the keyframes to get the timing right?
您不能播放两个动画，因为该属性只能定义一次。相反，为什么不在第一个动画中包含第二个动画并调整关键帧以获得正确的时间？
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin-scale 4s linear infinite;
}
@-webkit-keyframes spin-scale {
50%{
transform: rotate(360deg) scale(2);
}
100% {
transform: rotate(720deg) scale(1);
}
}<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">