TL; DR

Question

如何以不同的速度播放的两个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/ - 只播放一个动画（最后一个动画）。

Answer 1

如果有新人出现并抓住这个帖子，你可以用逗号指定多个动画 - 每个动画都有自己的属性。

示例：

animation: rotate 1s, spin 3s;

Answer 2

TL; DR

使用逗号，您可以指定多个动画，每个动画都有自己的属性。

示例：

animation: rotate 1s, spin 3s;

原始答案

这里有两个问题：

＃1

-webkit-animation:spin 2s linear infinite; -webkit-animation:scale 4s linear infinite;

第二行取代第一行。所以，没有效果。

＃2

两个关键帧都适用于同一属性transform

作为替代方案，您可以将图像包装在<div>中，并分别为每个图像设置动画，并以不同的速度设置。

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>

Answer 3

您确实可以同时运行多个动画，但您的示例有两个问题。首先，您使用的语法仅指定一个动画。第二种风格规则隐藏第一种。您可以使用以下语法指定两个动画：

-webkit-animation-name: spin, scale
-webkit-animation-duration: 2s, 4s

就像在这个小提琴里（我替换了＃34;缩放＆＃34;用＆＃34;淡出＆＃34;由于下面解释的另一个问题......跟我一起。）：http://jsfiddle.net/rwaldin/fwk5bqt6/ < / p>

其次，两个动画都会改变同一DOM元素的相同CSS属性（转换）。我不相信你能做到这一点。您可以在不同的元素上指定两个动画，可能是图像和容器元素。只需将其中一个动画应用到容器中，就像在这个小提琴中一样：http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Answer 4

你可以尝试这样的事情

将父级设置为rotate，将图像设置为scale，以便rotate和scale时间可以不同

＆＃13;

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);
  }
}

＆＃13;

<div>
  <img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120" />
</div>

＆＃13;

Answer 5

您无法播放两个动画，因为该属性只能定义一次。相反，为什么不在第一个动画中包含第二个动画并调整关键帧以使时机正确？

＆＃13;

.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);
    } 
}

＆＃13;

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

＆＃13;

同时播放多个CSS动画

5 个答案:

TL; DR

原始答案