构建一个文字闪烁效果

在这个新教程中，我们将学如何使用 CSS 动画和一些 JavaScript 创建无限闪烁/闪烁的文本效果。具体来说，选定的文本部分将在一段时间后改变颜色。之后，动画将重新初始化。 

1. 从 HTML 标记开始

写几个品牌字，如下所示：

<div class = ‘container’>
  <div class="blinking-wrapper">
    Accenture,
    Amazon
    Apple,
    Astrazeneca,
    Citigroup,
    Coca-Cola Co,
    Disney
    Google,
    ...
  </div>
</div>

对于我们想要制作动画的每个品牌（一段文本），我们将其包装在一个span元素内并为其赋予data-number属性。自定义属性的值将决定动画顺序。数字越小，动画运行得越快。也就是说，具有data-number="1"属性值的元素将首先被动画化，然后是具有data-number="2"属性值的元素，依此类推。

这是所需的标记骨架：

<div class = ‘container’>
  <div class="blinking-wrapper">
    Accenture,
    Amazon
    Apple,
    Astrazeneca,
    Citigroup,
    <span data-number = "1"> 
    coca-cola co 
    </span>,
    Disney
    Google,
    IBM,
    <span data-number="2">
    intel
    </span>,
    JPMorgan Chase,
    Mastercard,
    McDonalds,
    Meta,
    NASA,
    <span data-number = "4"> 
    nestle sa 
    </span>,
    Netflix,
    Nike,
    ...
  </div>
</div>

2. 添加CSS

CSS 非常基础。我们需要做的就是对 s 应用 CSS 动画，span将其颜色从白色更改为我们选择的颜色。但请注意一件事：页面加载时动画将按顺序运行。此时，我们将把blinking类添加到包装器中并给予span适当的延迟。

启动闪烁效果，以下是所有样式：

/*CUSTOM VARIABLES HERE*/
.container {
  max-width: 1600px;
  padding: 0 15px;
  margin: 0 auto;
}
.blinking-wrapper {
  font-size: 50px;
}
.blinking-wrapper.blinking [data-number] {
  animation: 
  changecolor 1.5s var(--delay , 0s);
}
@keyframes changeColor {
  to {
    color: var(--green);
  }
}
@media (max-width: 600px) {
  .blinking-wrapper {
    font-size: 25px;
  }
}

3. 添加JS

如上所述，除了在blinking页面加载时将类添加到包装元素之外，我们还将为每个类分配适当的延迟，span以确定它们的闪烁动画何时开始。第一个元素不会有任何延迟。一旦前一个动画元素的动画完成，所有其他元素都会触发。

根据需要调整闪的时间。 

JavaScript：

重播动画

使用此代码后，我们的动画将按预期播放一次。但是，如果我们想无限地按顺序重播它们（保持所需的延迟）怎么办？仅使用动画迭代计数infinite关键字是行不通的。

在这种情况下，

我们将等待所有动画完成，

然后使用animationend最后一个动画元素，

如下所示：

接下来，我们将定位所需的元素并***其animationend事件。

在其中，我们将做三件事：

• blinking从包装元素中删除该类。

• 通过计算该元素的高度或任何使其回流而不返回任何内容的内容来强制回流该元素。

• 再次blinking向其中添加类。
  

JavaScript ：

另一种实现方式是，在尽可能短的延迟之后将类附加到包装器，而不是强制进行回流（根据您的布局，回流可能会很昂贵），通过给出零延迟，我们将让浏览器决定最短延迟时间：

除了这里讨论的这些方法之外，还有其他方法。如果您使用任何其他工具来完成类似的事情，请随时在X上或在演示评论中告诉我们！

结论

 在本教程中，借助该事件，我们成功构建了具有令人惊叹的动画的无限闪烁 CSS 效果animationend 。如果您想突出显示文本的特定部分（例如最新项目、顶级客户、顶级技能等），这种效果非常有用。

这又是我们的效果：

See the Pen  Build an Infinite Blinking Text Animation With CSS and a Touch of JavaScript by Envato Tuts+ (@tutsplus)  on CodePen.

一如既往，非常感谢您的阅读！