CSS动画只播放一次怎么设置

CSS动画默认只执行一次，是因为animation-iteration-count的初始值为1，但只需简单设置该属性为infinite即可实现无限循环，配合alternate方向控制还能打造平滑往返效果；同时需警惕animation-fill-mode（如forwards会“冻结”末帧掩盖循环）、play-state暂停、无效时长或元素隐藏等常见干扰因素——掌握这些关键点，就能精准掌控动画的播放次数与行为表现。

CSS动画执行一次就停止，是因为默认的 animation-iteration-count 值是 1。想让动画重复播放，只需显式设置该属性即可。

设置 animation-iteration-count 为 infinite

这是最常用的方式，让动画无限循环播放：

• 在 CSS 中添加 animation-iteration-count: infinite;
• 也可以简写在 animation 复合属性里，例如：
  animation: slide 2s ease-in-out infinite;
• 注意：如果动画本身有 animation-fill-mode（比如设为 forwards），即使设了 infinite，视觉上也可能“卡住”，需确认是否误用了填充模式

指定具体重复次数

若只需播放固定次数（如 3 次、5 次），直接写数字：

• animation-iteration-count: 3;
• 支持小数，例如 2.5 表示完整播 2 次 + 半次（停在中间状态）
• 值为 0 或负数时，动画不执行

配合 animation-direction 控制来回播放

单次播放后停止，有时其实是方向问题。可结合 animation-direction 实现更自然的循环：

• animation-direction: alternate;：奇数次正向，偶数次反向（适合呼吸、摇摆类效果）
• animation-direction: alternate-reverse;：首次反向，之后交替
• 常与 infinite 搭配使用，避免生硬跳回起点

检查是否有其他属性干扰循环

即使设置了 infinite，动画仍只播一次？可能是以下原因：

• animation-play-state: paused; —— 确保不是被暂停了
• animation-fill-mode: forwards; —— 这会让动画停在最后一帧，掩盖了重复行为；如需循环，建议用 none 或 backwards
• 动画时长（animation-duration）为 0s 或无效值，会导致无实际播放
• 元素被移除、隐藏（display: none）或脱离文档流，也会中断动画

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS动画只播放一次怎么设置》文章吧，也可关注golang学习网公众号了解相关技术文章。