在没有JavaScript的情况下停止CSS动画,可以通过以下方法:
使用CSS关键帧动画可以在一定时间内改变元素的样式,并在动画结束时保持最终样式。例如:
@keyframes example {
0% {
background-color: red;
transform: translateY(0);
}
100% {
background-color: yellow;
transform: translateY(-20px);
}
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards;
}
在这个例子中,.box
元素的背景颜色和位置将在2秒内改变,并在动画结束时保持最终样式。
animation-fill-mode: forwards
animation-fill-mode
属性用于指定动画结束后元素的样式。将其设置为forwards
可以使元素保持动画结束时的样式。例如:
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards;
}
在这个例子中,.box
元素的背景颜色将在2秒内改变,并在动画结束时保持最终样式。
总结:在没有JavaScript的情况下停止CSS动画,可以使用CSS关键帧动画和animation-fill-mode: forwards
属性来实现。这样可以保持元素在动画结束时的最终样式,从而达到停止动画的效果。
领取专属 10元无门槛券
手把手带您无忧上云