CSS从入门到精通——动画:CSS3动画执行次数和逆向播放
/* 定义一个简单的关键帧动画 */
@keyframes example {
from { background-color: red; }
to { background-color: yellow; }
}
/* 应用动画到元素，设置动画执行次数和是否逆向播放 */
.animated-example {
animation-name: example; /* 引用动画名称 */
animation-duration: 4s; /* 动画周期 */
animation-iteration-count: 3; /* 动画执行3次 */
animation-direction: alternate; /* 动画反向播放 */
}这段代码定义了一个名为example的关键帧动画，并在.animated-example类中使用了它。动画会从红色变为黄色，周期为4秒，并且设置了执行次数为3次，动画反向播放，即在到达to状态后会反向回到from状态。
评论已关闭