CSS3动画基础与CSS3过渡基础

动画属性:animation

animation 与 transition的区别

相同点：都是随着时间改变元素的属性值。
不同点：

1. transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；（初始效果——最终的效果之间的变化；）
2. animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值，（初始效果———动画帧———动画帧————最终的效果）

animation 复合式写法:

过度时间和延迟时间顺序不能互换，前面是过度时间，后面的是延迟时间。

animation 属性值

1. animation-name (必要的)检索或设置对象所应用的动画名称
   必须与规则@keyframes配合使用 （定义关键帧）：
   @keyframes mymove{} animation-name:mymove;
   语法一：

@keyframes mymove{
				  from{初始状态属性}
			   	  to{结束状态属性}
  				 }

语法二： 0%  =   from    ;      100%   =     to
@keyframes mymove{
				0%{初始状态属性}
				100%{结束状态属性}
	 		} 

2. animation-duration (必要的)
   检索或设置对象动画的持续时间 （s,ms）
   说明：animation-duration:3s; 动画完成使用的时间为3s

3. animation-d