css动画---animation

由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作。

动画和过渡的区别

提示：这里可以添加本文要记录的大概内容：

不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画

相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、动画是什么？

动画( animation)是中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）相比较过渡，动画可以实现更多变化，更多控制，连续自动插放等效果。

二、动画该如何使用

1.定义动画的关键帧

代码如下（示例）：

@keyframes 动画名称{
			from { Properties:Properties value; }
			百分比 { Properties:Properties value; }
			....
			to { Properties:Properties value; }
		}

		@keyframes 动画名称{
			0% { Properties:Properties value; }
			百分比 { Properties:Properties value; }
			....
			100% { Properties:Properties value; }
		}

2.应用动画的各个属性

代码如下（示例）：

		1> animation-name: 定义动画的名字
		2> animation-duration: 定义动画的时间
		3> animation-timing-function: 定义动画的速度。
		4> animation-delay: 延迟时间
		5> animation-iteration-count: 10 | infinite; // 表示无限次循环
			定义动画执行多少次
		6>animation-direction: alternate; // 定义动画的执行方向
			normal:默认值，执行完毕之后瞬间恢复最初始状态
			reverse:动画反向执行
			alternate:动画正向执行完毕，在反向执行动画；
			注意：设置此属性之后正向算一次动画反向算一次动画，所以如果设置动画执行1次，此属性值不生效；
			alternate-reverse:动画先反向执行，在正向执行；
			注意：设置此属性之后反向算一次动画正向算一次动画，所以如果设置动画执行1次，只会执行反向一次动画；
		7> animation-fill-mode: 定义动画的终止状态
			一个动画执行完毕的默认状态是什么？就是初始状态！
			forwards: 应用动画的最终状态
			backwards: 在delay延迟期间，应用你定义的第一帧的状态

		8> animation-play-state: 控制动画的执行状态
			paused 	 指定暂停动画	
			running	 指定正在运行的动画

3.应用动画的简写

animation: 动画名称 时长 动画速度 延迟 执行次数 执行方向;

---

总结

描述了 CSS 动画我认为的一些比较重要、值得一讲、需要注意的点。当然很多地方点到即止，很多细节还需要读者进一步阅读规范或者自行尝试验证，实践出真知，纸上得来终觉浅。

OK，本文到此结束，希望本文对你有所帮助 😃

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。