CSS3动画结束后停在最后一帧

最新推荐文章于 2024-08-23 11:00:49 发布

原创最新推荐文章于 2024-08-23 11:00:49 发布 · 4.3k 阅读

CC 4.0 BY-SA版权

文章标签：

14 篇文章

订阅专栏

本文详细介绍了CSS动画属性animation-fill-mode的使用方法及其四种不同值的含义：none、forwards、backwards和both。该属性决定了动画在播放前后的状态表现，是掌握CSS动画完整流程的关键。

animation-fill-mode: forwards;//保留最后一帧的状态

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

animation-fill-mode : none | forwards | backwards | both;

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。