css3动画如何在动作结束时保持该状态不变

html-css0152

css3动画如何在动作结束时保持该状态不变,第1张

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

none：不改变默认行为。  

forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。  

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。  

both：向前和向后填充模式都被应用。

扩展资料：

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块   。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。

参考资料：百度百科-CSS3

新建keyframes元素，命名为myFirst。设置百分比，编写Animation属性对属性值的引用。为了开考虑兼容性问题，可以多写几个备选，详细步骤：

1、首先，准备好HTML前期工作以及对DIV的一个简单设置。

2、然后，新建keyframes元素，命名为myFirst。

3、然后，可以在设置百分比，不仅仅只能设置4个，大家可以根据需求设置。

4、这时候，可以为他写上各种百分比的颜色。

5、此时，就能编写Animation属性对属性值的引用。

6、为了开考虑兼容性问题，可以多写几个备选。