CSS animate动画效果

1.CSS动画

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

过渡和动画的异同:
不同点：

• 过渡必须要人为的触发才会执行
• 动画不需要认为的触发就可以触发执行页面

相同点：

• 过渡和动画都是用来给元素添加动画的
• 过渡和动画都是系统新增的一些属性
• 过渡和动画都需要满足三要素才会有动画效果(三要素见主页博客CSS Transition过渡)

2.Animate属性设置

• animation-name 指定要绑定到选择器的关键帧的名称，告诉系统需要执行哪个动画
  通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间，也可以通过from关键字表示。100%表示动画的结束时间，也可以通过to关键字表示。

	   @keyframes animiationName{
​                 keyframes-selector{
​                      css-style;