【日常记录】【CSS】利用动画延迟实现复杂动画

/* 定义动画 */
@keyframes example {
  0%   { background-color: red; }
  25%  { background-color: yellow; }
  50%  { background-color: blue; }
  100% { background-color: green; }
}
 
/* 应用动画，并设置不同的延迟时间 */
.delay-animations {
  animation-name: example;  /* 使用定义的动画 */
  animation-duration: 4s;   /* 动画周期为4秒 */
  animation-iteration-count: infinite; /* 动画无限循环 */
}
 
.delay-animations:nth-child(1) {
  animation-delay: 0s; /* 第1个元素没有延迟 */
}
 
.delay-animations:nth-child(2) {
  animation-delay: 1s; /* 第2个元素延迟1秒 */
}
 
.delay-animations:nth-child(3) {
  animation-delay: 2s; /* 第3个元素延迟2秒 */
}
 
.delay-animations:nth-child(4) {
  animation-delay: 3s; /* 第4个元素延迟3秒 */
}

这段代码定义了一个名为example的关键帧动画，并通过不同的animation-delay值应用到了四个不同的元素上，实现了它们在不同时间点上开始执行动画的效果。