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

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

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)*/
}

值为：

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/animation
• https://drafts.c​​sswg.org/css-animations/#animation