css3延迟动画案例

CSS3延迟动画是通过设置动画的delay属性来控制元素何时开始动画。下面将会展示一个CSS3延迟动画的小案例。

/* 设置延迟动画的元素 */
.delay-animation{
  width: 100px;
  height: 100px;
  background-color: pink;
  animation: delay 1s ease-in-out forwards;
}

/* 定义延迟动画的关键帧 */
@keyframes delay{
  0%{ transform: translateX(-200px); }
  50%{ transform: translateX(0); }
  100%{ transform: translateX(-200px); }
}

/* 设置延迟开始时间 */
.delay-animation:first-child{
  animation-delay: 0s;
}

.delay-animation:nth-child(2){
  animation-delay: 0.5s;
}

.delay-animation:last-child{
  animation-delay: 1s;
}

如上代码所示，先设置了延迟动画的元素中的一些基本样式。接着定义了一个关键帧，通过transform属性来实现元素的运动动画。最后，通过设置:nth-child来为每一个元素设置不同的延迟动画开始时间。

可以根据自己的需求来设置不同的动画效果及延迟时间，从而实现更为精彩的CSS3延迟动画效果。