css animation-iteration-count infinite如何使用-css教程-PHP中文网

css animation-iteration-count infinite如何使用

P粉602998670

发布： 2025-10-18 10:51:01

原创

621人浏览过

animation-iteration-count: infinite 用于让动画无限循环。需配合 @keyframes 定义动画帧，并通过 animation 属性应用到元素，如 .element { animation: example 2s infinite; }。示例中盒子每1.5秒左右移动并持续重复，常用于加载旋转、呼吸效果等UI动效。实际使用时应注意性能，避免大量复杂动画影响流畅度，可通过 Intersection Observer 在不可见时暂停以优化体验。

css animation-iteration-count infinite如何使用

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 左右移动

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

立即学习“前端免费学习笔记（深入）”；

@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); }
}

登录后复制