具有不同延迟的CSS多个动画[重复]

Question

根据MDN

p {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

等价于

p {
  animation: 3s infinite alternate slidein;
}

---

在同一个元素上应用多个动画可以通过以下方式实现：

<div></div>

@keyframes animScale{
    from{
        transform: scale(0.2, 0.2);
    }
    to{
        transform: scale(1, 1);
    }
}

@keyframes animOpacity{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

div{
    width: 200px;
    height: 200px;
    background: red;
    animation: animScale 2000ms ease-in-out infinite,
    animOpacity 2000ms ease-in-out infinite;
}

---

有没有办法可以将animation-delay 写入属性animation，这样我就可以有两个从不同时间开始的动画？

Answer 1

在缓动（AKA 计时函数）值之后添加延迟。

div{
  width: 200px;
  height: 200px;
  background: red;
  animation: animScale 2000ms ease-in-out 1000ms infinite,
             animOpacity 2000ms ease-in-out 2000ms infinite;
  /* scale will start after 1s and opacity after 2s (1s after the scale)*/
}

animation 简写的 order 值如下：

动画-名称：名称
动画-持续时间：0
动画-定时功能：轻松
动画-延迟：0
动画-迭代次数：1
动画-方向：正常
动画-填充模式：无
动画-播放状态：正在运行

阅读更多：https://developer.mozilla.org/en-US/docs/Web/CSS/animation