如何在CSS列表上创建交错的动画效果

使用CSS创建交错动画效果需为列表项设置相同动画但错开开始时间。首先构建无序列表HTML结构，接着定义如淡入上滑的@keyframes动画，然后通过:nth-child选择器或CSS自定义属性为每个列表项设置递增的animation-delay实现 stagger 效果，最后可选JavaScript控制进入视口时触发。该方法通过协调元素时序实现自然流畅的级联动画。

To create a staggered animation effect on a list using CSS, you apply the same animation to each list item but offset their start times so they animate one after another. This gives a cascading or wave-like visual effect that draws attention and adds polish.

1. Set up your HTML structure

Start with a simple unordered list. Each list item will be animated in sequence.

2. Define the animation keyframes

Create a @keyframes rule for the animation you want — for example, fading in and sliding up.

3. Apply staggered delays using CSS custom properties or :nth-child

There are two clean ways to stagger the animation timing:

Option A: Using :nth-child selectors .stagger-list li {
  animation: fadeInUp 0.6s ease-out forwards;
}

.stagger-list li:nth-child(1) { animation-delay: 0.1s; }
.stagger-list li:nth-child(2) { animation-delay: 0.2s; }
.stagger-list li:nth-child(3) { animation-delay: 0.3s; }
.stagger-list li:nth-child(4) { animation-delay: 0.4s; }

Option B: Using CSS custom properties (scalable) .stagger-list {
  --delay-step: 0.1s;
}

.stagger-list li {
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: calc(var(--delay-step) * var(--i));
}

.stagger-list li:nth-child(1) { --i: 1; }
.stagger-list li:nth-child(2) { --i: 2; }
.stagger-list li:nth-child(3) { --i: 3; }
.stagger-list li:nth-child(4) { --i: 4; }

This method scales better if you have many items or dynamic content.

4. Optional: Trigger animation on page load or scroll

By default, animations run as soon as the page loads. To trigger them only when the list enters the viewport, use JavaScript with Intersection Observer, or add a class like .animate-in via JS when visible.

Alternatively, for a pure CSS approach, you can set animation-play-state: paused initially and change it with JavaScript when needed.

Staggered animations bring life to lists without overwhelming the user. With small delays and smooth transitions, the effect feels natural and engaging. Basically just coordinate timing across elements using delay — easy with CSS alone.

以上是如何在CSS列表上创建交错的动画效果的详细内容。更多信息请关注PHP中文网其他相关文章！