css3 动画重复播放 |css按钮文字

首先，必须指定动画的播放次数。可以使用animation-iteration-count属性来指定动画的播放次数：

.my-animation {
animation-iteration-count: 2; /* 播放两次 */
}

如果要让动画无限循环播放，可以将属性值设为infinite：

.my-animation {
animation-iteration-count: infinite; /* 无限循环 */
}

除了指定播放次数外，还可以利用@keyframes规则来控制动画的播放顺序和效果。需要通过指定不同的关键帧来定义动画的变化过程。如下面的例子，定义了一个尺寸交替变化的动画：

@keyframes resize {
from {
width: 100px;
height: 100px;
}
to {
width: 200px;
height: 200px;
}
from {
width: 200px;
height: 200px;
}
to {
width: 100px;
height: 100px;
}
}
.my-animation {
animation-name: resize;
animation-duration: 2s;
animation-iteration-count: infinite;
}

上面的例子定义了一个名为resize的动画，将其绑定到.my-animation元素上。动画的播放时间为 2 秒，且无限循环播放。在@keyframes中，定义了两个阶段的交替变化，实现尺寸交替变化的效果。

除了from和to关键帧外，还可以使用百分比来控制动画的变化过程：

@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}
.my-animation {
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
}

上面的例子定义了一个名为move的动画，将其绑定到.my-animation元素上。动画的播放时间为 2 秒，且无限循环播放。在@keyframes中，定义了从原点开始到右边 100px，再回到原点的变化过程。

总之，通过指定播放次数和控制动画的变化过程，可以实现各种形式的重复播放动画，为网页带来更加丰富的表现力。