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 shorthand 的值 order 为：

animation-name: name
animation-duration: 0
animation-timing-function: ease
animation-delay: 0
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running

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

CSS 具有不同延迟的多个动画

CSS multiple animation with different delay

css

animation