html - 向一个元素添加 2 个 css 动画

Question

我有 2 个元素，一个是矩形，另一个是直线。完成后，我将 rect 从左向右移动，然后旋转 line。然后我想要的是，一旦线旋转，我想改变 rect 的背景颜色。

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

.line {
  position: absolute;
  top: 200px;
  left: 100px;
  height: 100px;
  border-right: 2px solid green;
  animation: rotate 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.3s;
}

@-webkit-keyframes move {
  to {
    left: 200px;
  }
}

@-webkit-keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

<div class="rect"></div>
<div class="line"></div>

JSFiddle

Answer 1

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

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

.line {
  position: absolute;
  top: 200px;
  left: 100px;
  height: 100px;
  border-right: 2px solid green;
  animation: rotate 1s;
  animation-fill-mode: forwards;
  animation-delay: 1.3s;
}

@-webkit-keyframes move {
  from {}
  to {
    left: 200px;
  }
}

@-webkit-keyframes rotate {
  from {}
  to {
    transform: rotate(360deg);
  }
}

@keyframes colorChange {
  to {
    background-color: green;
  }
}

<div class="rect"></div>
<div class="line"></div>