css延迟动画

CSS延迟（也称为动画延迟）是一种在CSS动画中设置开始时间的方法，它允许您在指定的时间内控制动画的开始，从而使动画在页面加载后的任何时间点开始播放，这对于创建交互式网站和应用程序非常有用，因为它们需要根据用户的操作或事件来触发动画。

在CSS中，可以使用animation-delay属性来设置动画的延迟时间，这个属性接受一个以秒为单位的时间值，可以是小数、百分比或关键词，以下是一些使用animation-delay属性的示例：

css延迟动画

1、使用小数表示延迟时间：

.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-delay: 0.5s;
}

在这个例子中，.box类的元素将在动画开始前等待0.5秒。

2、使用百分比表示延迟时间：

.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-delay: 50%;
}

在这个例子中，.box类的元素将在动画开始前等待动画总时长的一半，如果动画持续时间为2秒，那么元素将在1秒后开始播放动画。

css延迟动画

3、使用关键词表示延迟时间：

.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-delay: initial;
}

在这个例子中，.box类的元素将立即开始播放动画，没有延迟。initial是animation-delay属性的一个关键词，表示动画应该立即开始。

除了animation-delay属性之外，还有其他一些与动画延迟相关的CSS属性和方法，如transition-delay、transition-timing-function和JavaScript中的setTimeout()函数，这些方法可以帮助您更灵活地控制动画的延迟时间。

1、transition-delay属性：与animation-delay类似，transition-delay属性用于设置过渡效果的延迟时间，它接受相同的时间值格式，并可以应用于任何支持过渡效果的CSS属性。

.box {
  transition-property: background-color, width, height;
  transition-duration: 2s;
  transition-delay: 0.5s;
}

css延迟动画

在这个例子中，当.box类的元素的背景颜色、宽度或高度发生变化时，过渡效果将在0.5秒后开始。

2、transition-timing-function属性：这个属性用于设置过渡效果的速度曲线，它可以是一个预定义的值（如linear、ease等），也可以是一个自定义的贝塞尔曲线函数。

.box {
  transition-property: background-color, width, height;
  transition-duration: 2s;
  transition-timing-function: ease-in;
}

在这个例子中，过渡效果将以加速的方式开始，然后逐渐减速，最后在2秒内完成，这与默认的线性过渡效果不同。

3、JavaScript中的setTimeout()函数：除了CSS属性之外，还可以使用JavaScript中的setTimeout()函数来设置动画的延迟时间，这个函数接受一个回调函数和一个以毫秒为单位的时间值作为参数。

setTimeout(function() {
  document.querySelector('.box').style.animationName = 'slide';
}, 500);

在这个例子中，当页面加载后的500毫秒（即0.5秒）后，将触发一个回调函数，该函数将使具有.box类的元素开始播放名为slide的动画，这种方法允许您在JavaScript代码中动态地控制动画的延迟时间。