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

liuyan1106_

于 2020-09-02 13:05:18 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS/CSS3 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/liuyan1106_/article/details/108360113

14 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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