30秒CSS：创建优雅的错开动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00518/article/details/148375960

30秒CSS：创建优雅的错开动画效果

30-seconds-of-css Short CSS code snippets for all your development needs 项目地址: https://gitcode.com/gh_mirrors/30/30-seconds-of-css

什么是错开动画？

错开动画（Staggered Animation）是一种让多个元素依次播放动画的技术，每个元素以微小的时间差开始动画，创造出流畅而有层次感的视觉效果。这种技术在菜单展开、列表项显示等场景中非常实用。

实现原理

要实现错开动画，我们需要掌握几个关键CSS技术点：

初始状态设置：所有元素初始时隐藏（opacity: 0）并位于屏幕右侧（transform: translateX(100%)）
过渡效果：为所有元素设置相同的transition属性
延迟控制：通过CSS变量为每个元素设置不同的transition-delay值
状态切换：使用复选框的:checked状态触发动画

完整实现代码

<div class="container">
  <input type="checkbox" name="menu" id="menu" class="menu-toggler">
  <label for="menu" class="menu-toggler-label">菜单</label>
  <ul class="stagger-menu">
    <li style="--i: 0">首页</li>
    <li style="--i: 1">价格</li>
    <li style="--i: 2">账户</li>
    <li style="--i: 3">支持</li>
    <li style="--i: 4">关于</li>
  </ul>
</div>

.container {
  overflow-x: hidden;
  width: 100%;
}

.menu-toggler {
  display: none;
}

.menu-toggler-label {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

.stagger-menu {
  list-style-type: none;
  margin: 16px 0;
  padding: 0;
}

.stagger-menu li {
  margin-bottom: 8px;
  font-size: 18px;
  opacity: 0;
  transform: translateX(100%);
  transition-property: opacity, transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.750, -0.015, 0.565, 1.055);
}

.menu-toggler:checked ~ .stagger-menu li {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(0.055s * var(--i));
}

技术细节解析

CSS变量(--i)的使用：每个列表项通过style属性设置--i变量，这个值将用于计算动画延迟时间
calc()函数：使用calc(0.055s * var(--i))动态计算每个元素的延迟时间，第一个元素延迟0s，第二个0.055s，第三个0.11s，依此类推
贝塞尔曲线： cubic-bezier(0.750, -0.015, 0.565, 1.055)创建了一个有弹性的动画效果，使元素移动更生动
状态切换机制：使用隐藏的复选框和:checked伪类来控制动画的触发，这是一种无JavaScript的交互方式

实际应用建议

调整动画参数：
- 可以修改transition-duration改变动画速度
- 调整calc()中的乘数改变错开的时间间隔
- 尝试不同的贝塞尔曲线值获得不同的动画效果
扩展应用场景：
- 图片画廊的加载动画
- 通知消息的依次显示
- 步骤指示器的动画效果
性能优化：
- 对于复杂动画，考虑使用will-change属性
- 确保动画元素不会导致重排(reflow)