Html 向一个元素添加2个css动画

我有两个元素，一个是rect，另一个是line。我将

rect

从左向右移动，一旦完成，然后旋转

line

。然后我想要的是，一旦线被旋转，然后我想要改变

rect

的背景色

.rect{
位置：绝对位置；
左：0；
宽度：100px；
高度：100px；
背景：红色；
动画：移动1s；
动画填充模式：正向；
}
.线路{
位置：绝对位置；
顶部：200px；
左：100px；
高度：100px；
右边框：2倍纯绿；
动画：旋转1s；
动画填充模式：正向；
动画延迟：1.3s；
}
@-webkit关键帧移动{
到{
左：200px；
}
}
@-webkit关键帧旋转{
到{
变换：旋转（360度）；
}
}

---

可以使用逗号分隔多个动画。 只需将动画延迟添加到第二个动画即可更改颜色

.rect{
位置：绝对位置；
左：0；
宽度：100px；
高度：100px；
背景：红色；
动画：移动1s，颜色更改1s 2s；
动画填充模式：正向；
}
.线路{
位置：绝对位置；
顶部：200px；
左：100px；
高度：100px；
右边框：2倍纯绿；
动画：旋转1s；
动画填充模式：正向；
动画延迟：1.3s；
}
@-webkit关键帧移动{
从{}
到{
左：200px；
}
}
@-webkit关键帧旋转{
从{}
到{
变换：旋转（360度）；
}
}
@关键帧颜色更改{
到{
背景颜色：绿色；
}
}

这是怎么回事

在.rect中，添加第二个动画：

.rect {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100px;
  background: red;
  animation: move 1s, turnGreen 2.3s;
  animation-fill-mode: forwards;
}

 @-webkit-keyframes turnGreen{
      0% {background: red;}
      99% {background: red;}
      100% {background: green;}
}

然后定义新动画：

.rect {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100px;
  background: red;
  animation: move 1s, turnGreen 2.3s;
  animation-fill-mode: forwards;
}

 @-webkit-keyframes turnGreen{
      0% {background: red;}
      99% {background: red;}
      100% {background: green;}
}

---

我在你的JSFIDLE上测试了这个，它看起来像你描述的那样工作。

你不需要额外的

动画

，你只需要调整关键帧

%

，并将持续时间更改为

2.3s

，也就是

1s

+

1.3s

，如果你想在最后同时改变颜色，如果没有，则相应地调整

%

：

.rect{
位置：绝对位置；
左：0；
宽度：100px；
高度：100px；
动画：向前移动2.3秒；
}
.线路{
位置：绝对位置；
顶部：200px；
左：100px；
高度：100px；
右边框：2倍纯绿；
动画：向前旋转1s 1.3s；
}
@-webkit关键帧移动{
43.48%，100%{left:200px}/*100%/2.3=43.48%（大约），这是1s的持续时间（像以前一样），然后一直保持到最后（100%）*/
0%，99.99%{背景：红色}/*在99.99%的时间内保持红色*/
100%{背景：蓝色}/*但不是100%*/
}
@-webkit关键帧旋转{
到{变换：旋转（360度）}
}