创建交错动画的不同方法-css教程-PHP中文网

首页

web前端

css教程

创建交错动画的不同方法

Joseph Gordon-Levitt

Apr 19, 2025 am 10:28 AM

Different Approaches for Creating a Staggered Animation

基本动画很简单：定义关键帧、命名动画、应用于元素。但有时需要更复杂的技巧才能达到理想的动画效果。例如，声音均衡器可能对每个条形使用相同的动画，但它们是交错的，以产生独立动画的错觉。

最近在构建仪表板时，希望其中一个小部件的项目以交错动画的方式显示。

就像上面的声音均衡器一样，我开始使用:nth-child选择器。我使用无序列表（<ul></ul>）作为父容器，赋予它一个类，并使用:nth-child伪选择器来通过animation-delay偏移每个列表项的动画。

.my-list li {
  animation: my-animation 300ms ease-out;
}

.my-list li:nth-child(1) {
  animation-delay: 100ms;
}

.my-list li:nth-child(2) {
  animation-delay: 200ms;
}

.my-list li:nth-child(3) {
  animation-delay: 300ms;
}

/* 以此类推 */

此技术确实可以很好地交错项目，特别是如果您知道列表中在任何给定时间有多少项目。但是，当项目数量不可预测时（这正是我为仪表板构建的小部件的情况），这种方法就会失效。我确实不想每次列表中项目数量发生变化时都返回到这段代码，所以我编写了一个快速的 Sass 循环，它最多可以处理 50 个项目，并随着每个项目的增加而增加动画延迟：

.my-list {
  li {
    animation: my-animation 300ms ease-out;

    @for $i from 1 through 50 {
      &:nth-child(#{$i}) {
        animation-delay: 100ms * $i;
      }
    }
  }
}

这应该可以解决问题！然而，感觉太笨拙了。当然，它不会给文件增加太多重量，但是您知道编译后的 CSS 将包含许多未使用的选择器，例如 nth-child(45)。

一定有更好的方法。通常我会求助于 JavaScript 来查找所有项目并添加延迟，但是……这次我花了一些时间探索一下是否可以用 CSS 独自完成。

CSS 计数器怎么样？

我首先想到的是将 CSS 计数器与 calc() 函数结合使用：

.my-list {
  counter-reset: my-counter;
}

.my-list li {
  counter-increment: my-counter;
  animation-delay: calc(counter(my-counter) * 100ms);
}

不幸的是，这行不通，因为规范说明计数器不能在 calc() 中使用：

calc() 表达式的组件可以是字面值或 attr() 或 calc() 表达式。

事实证明，一些人喜欢这个想法，但它还没有超出草案阶段。

数据属性怎么样？

在阅读了规范的摘录后，我了解到 calc() 可以使用 attr()。并且，根据 CSS 值和单位规范：

在 CSS3 中，attr() 表达式可以返回许多不同类型的值

这让我想到；也许数据属性可以解决问题。

Item 1
Item 2
Item 3
Item 4

.my-list li {
  animation-delay: calc(attr(data-count) * 150ms);
}

但是我的希望破灭了，因为这个的浏览器支持非常糟糕！

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

移动/平板电脑

所以，回到绘图板。

自定义属性怎么样？

我的下一个想法是使用 CSS 自定义属性。它并不漂亮，但它有效了 ?

事实证明它也很灵活。例如，动画可以反转：

它还可以做一些完全随机的事情并且同时动画元素：

我们甚至可以更进一步，做一个对角线挥动：

浏览器支持并没有那么糟糕（戳戳 Internet Explorer）。

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

移动/平板电脑

CSS 的一个很棒的功能是它会忽略它不理解的东西，这要归功于级联。这意味着所有内容都将一起动画到视图中。如果这不是您的风格，您可以添加一个功能查询来覆盖默认动画：

.my-list li {
  animation: fallback-animation;
}

@supports (--variables) {
  .my-list li {
    animation: fancy-animation;
    animation-delay: calc(var(--animation-order) * 100ms);
  }
}