animation-iteration-count: infinite 用于让动画无限循环。需配合 @keyframes 定义动画帧，并通过 animation 属性应用到元素，如 .element { animation: example 2s infinite; }。示例中盒子每1.5秒左右移动并持续重复，常用于加载旋转、呼吸效果等UI动效。实际使用时应注意性能，避免大量复杂动画影响流畅度，可通过 Intersection Observer 在不可见时暂停以优化体验。
CSS 中的 animation-iteration-count: infinite 用于让动画无限次循环播放。它常配合 @keyframes 和其他动画属性一起使用，使元素的动画持续不断地运行。
基本语法
animation-iteration-count 属性定义动画执行的次数。设置为 infinite 时，动画会一直重复播放。
常用写法如下：
.element { animation-name: example; animation-duration: 2s; animation-iteration-count: infinite;}
也可以简写在 animation 复合属性中：
.element { animation: example 2s infinite;}
配合 @keyframes 使用
必须先定义一个关键帧动画（@keyframes），然后将其绑定到目标元素上。
示例：让一个 div 左右移动
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
立即学习“前端免费学习笔记（深入）”；
@keyframes moveSide { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); }}.box { width: 50px; height: 50px; background: blue; animation: moveSide 1.5s infinite;}
这个盒子会每 1.5 秒完成一次左右移动，并且不断重复。
实际应用场景
infinite 常用于需要持续动画效果的 UI 元素，比如：加载动画（loading spinner） 呼吸效果（如亮度或大小轻微变化） 滚动提示箭头 悬浮按钮微动效
例如做一个旋转的加载图标：
.loader { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
注意事项
虽然 infinite 很方便，但要注意性能和用户体验：避免在大量元素上同时使用复杂无限动画，可能影响页面流畅度 可考虑在用户不可见时暂停动画（如通过 Intersection Observer 控制） 确保动画不会引起眩晕或干扰主要内容基本上就这些。只要设置 animation-iteration-count: infinite 或简写在 animation 属性中，动画就会持续播放。
以上就是css animation-iteration-count infinite如何使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1007072.html
微信扫一扫 
支付宝扫一扫 
