CSS 属性

CSS animation-delay 属性确定将动画应用到元素和动画开始之间的持续时间。

这种延迟使得可以在一定时间后从开始处开始动画，或者立即在动画期间的某个点开始动画。

速记属性动画是同时设置所有动画属性的便捷方法。

属性值

CSS 属性animation-delay 可以具有以下值:

<time>: 这是指动画应用于元素之前的时间延迟（以秒或毫秒为单位），从该时刻开始的应用程序。规范需要测量单位。

  • 正值表示动画开始前的延迟，而默认值 0 表示动画开始应用后立即开始。

  • 负值会触发动画立即开始，动画在其周期的一部分之后开始。

    例如，指定 -1s表示动画立即开始，但在序列中 1 秒后开始。如果延迟为负并且起点是隐式的，则从应用动画的那一刻起确定。

注意:当多个指定animation-*属性上的逗号分隔值，这些值将按照动画名称出现的顺序应用于动画。

注意:CSS 滚动驱动的动画不受animation-delay 值的影响。

语法

animation-delay = <time>#

适用范围

全部HTML 元素，::before 和 ::after 伪元素。

CSS 动画延迟: 基本示例

  • 以下示例中使用animation-delay 属性来演示元素动画的延迟。
  • 由于没有设置延迟，第一个动画框立即开始其滑动动画。
  • 另一方面，第二个动画框（由 .animated-box-delayed 类标识）将其滑动动画的开始延迟两秒。
<html>   
<head>
<style>
   @keyframes slideIn {
      from {
      transform: translateX(-100%);
      }
      to {
      transform: translateX(0);
      }
   }
   .animated-box {
      width: 300px;
      height: 150px;
      background-color: #edb753;
      color: #fff;
      margin-left: 30px;
      text-align: center;
      line-height: 150px;
      font-size: 20px;
      font-family: Arial, sans-serif;
      animation: slideIn 2s ease-in-out;
   }
  .animated-box-delayed {
      animation-delay: 2s; 
   }
</style>
</head>
<body>
<div class="animated-box">动画无延迟</div><br/>
<div class="animated-boxanimated-box-delayed">延迟 2 秒的动画</div>
</body>
</html>