使用css3如何对动画进行延时操作？

王铁柱6662026-04-20 11:51

在 CSS3 中，你可以使用 animation-delay 属性来对动画进行延时操作。animation-delay 属性定义动画在启动前的延迟时间。这个属性允许你为一个动画序列提供开始前的延时。

下面是一个简单的例子，演示了如何使用 animation-delay：

css 复制代码

@keyframes example {
  0%   {background-color: red;}
  50%  {background-color: yellow;}
  100% {background-color: green;}
}

div {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s; /* 动画将在 2 秒后开始 */
}

在这个例子中，动画将在页面加载完成后的 2 秒钟开始，然后执行一个 4 秒钟的动画序列，背景颜色从红色变为黄色，然后变为绿色。

需要注意的是，animation-delay 的值可以是秒（s）或毫秒（ms）。例如，2s 表示 2 秒，2000ms 也表示 2 秒。负值也是允许的，如果指定了负值，那么动画会立即开始，但是会从动画序列中的某个点开始播放。例如，如果 animation-duration 是 4 秒，animation-delay 是 -2s，那么动画会从动画序列的中间开始播放。