跳到主要内容

CSS 动画迭代

CSS动画是网页设计中常用的技术，用于创建动态效果。动画的迭代次数决定了动画重复播放的次数。通过 animation-iteration-count 属性，我们可以轻松控制动画的重复行为。

什么是动画迭代？​

动画迭代指的是动画从开始到结束的完整播放次数。默认情况下，CSS动画只会播放一次。通过设置 animation-iteration-count 属性，我们可以让动画重复播放多次，甚至无限循环。

语法​

css
animation-iteration-count: number | infinite;
  • number：指定动画的播放次数。例如，2 表示动画会播放两次。
  • infinite：表示动画会无限循环播放。

基本用法​

让我们从一个简单的例子开始。假设我们有一个元素，我们希望它在页面上来回移动，并且重复三次。

css
@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: move 2s ease-in-out;
  animation-iteration-count: 3;
}

在这个例子中，.box 元素会在2秒内从原位移动到100px的位置，然后再返回原位。由于我们设置了 animation-iteration-count: 3，这个动画会重复三次。

备注

animation-iteration-count 属性可以与 animation 简写属性一起使用，也可以单独使用。

无限循环动画​

有时候，我们希望动画无限循环播放。这时，我们可以将 animation-iteration-count 设置为 infinite。

css
.box {
  animation: move 2s ease-in-out infinite;
}

在这个例子中，.box 元素会无限次地重复移动动画。

实际应用场景​

加载动画​

加载动画是无限循环动画的典型应用场景。例如，我们可以创建一个旋转的加载图标：

css
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

这个加载图标会无限旋转，直到页面加载完成。

按钮悬停效果​

我们可以使用有限次数的动画来增强按钮的悬停效果。例如，当用户悬停在按钮上时，按钮会闪烁几次：

css
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;
}

.button:hover {
  animation: blink 0.5s ease-in-out 3;
}

在这个例子中，当用户悬停在按钮上时，按钮会闪烁三次。

总结​

animation-iteration-count 是控制CSS动画重复次数的重要属性。通过设置不同的值，我们可以让动画播放一次、多次，甚至无限循环。这一特性在加载动画、按钮效果等场景中非常有用。

附加资源与练习​

通过实践这些练习，你将更好地掌握CSS动画迭代的概念和应用。