CSS中的帧动画是一种常见的动画效果,但有时候我们需要让它停止。以下是一些方法:
/* 方法一:使用animation-play-state属性 */
.element {
animation: my-animation 2s infinite;
}
.element.stop {
animation-play-state: paused;
}
/* 方法二:使用@keyframes规则 */
/* 定义一个空状态 */
@keyframes my-animation {
0% {}
100% {
transform: rotate(360deg);
}
}
.element {
animation: my-animation 2s infinite;
}
.element.stop {
animation-name: none;
}
以上两种方法都可以让帧动画停止。第一种方法使用了animation-play-state属性,将其设置为paused,可以暂停动画的运行。第二种方法则使用了@keyframes规则,在停止时可以通过将动画名称设置为none来实现。