css动画重复次数animation-iteration-count设置-css教程-PHP中文网

css动画重复次数animation-iteration-count设置

P粉602998670

发布： 2025-10-23 19:26:01

原创

849人浏览过

使用animation-iteration-count属性控制CSS动画重复次数，可设为数字或infinite实现循环；配合animation-direction可定义播放方向，如alternate实现来回滑动，常用于加载动画等场景。

css动画重复次数animation-iteration-count设置

在CSS中，控制动画重复次数使用 animation-iteration-count 属性。这个属性定义了动画应该播放多少次。

animation-iteration-count 的常见取值包括：

示例：

.element {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: 3; /* 动画播放3次 */
}

登录后复制

如果希望动画一直播放，比如加载动画或轮播效果，可以设为 infinite：

.loading-spinner {
  animation: spin 1s linear infinite;
}

登录后复制

这样动画会持续不断地运行，直到元素被移除或动画被停止。

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

当动画重复时，可配合 animation-direction 控制播放方向：

例如实现来回滑动：

.slide-back-and-forth {
  animation: slide 1s ease-in-out 3 alternate;
}

登录后复制

这段动画会播放3次，第1次正向，第2次反向，第3次又正向（因为是奇数次）。

在使用 animation-iteration-count 时注意：

基本上就这些，合理设置重复次数能让页面动效更自然流畅。

以上就是css动画重复次数animation-iteration-count设置的详细内容，更多请关注php中文网其它相关文章！

大家都在看：