时间戳

首页 > 解决方案 > CSS多个动画具有不同的延迟

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

问题描述

根据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，以便我可以从不同时间开始有两个动画？

标签： cssanimation

解决方案

在缓动（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

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

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

推荐阅读