css3动画属性animation

一，animation属性

1.在css3中定义了新属性animation用于制作动画效果

2.一个完整的动画效果由animation属性和@keyframes动画帧组成。

二，animation子属性

1.animation是一个简写属性，包含了其他子属性

（1）animation-name：规定动画名称

（2）animation-duration ：规定动画完整执行的时长

（3）animation-timing-function ：规定动画的执行曲线

（4）animation-delay ： 规定动画的开始之前的延迟

（5）animation-iteration-count ： 规定动画执行的次数

（6）animation-direction ：规定动画是否应该轮流反向播放动画，默认normal

（7）animation-fill-mode ： 规定动画时间之外的状态

（8）animation-play-state ：规定动画是运行还是暂停。

2.注意至少定义animation-name和animation-duration两项 CSS3 动画属性，并将它绑定到某个选择器，否则不会产生动画效果。

三 ， @keyframe规则定义动画帧

1.@keyframes 规则用于创建动画帧。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

2.使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

	div{
		animation: changeBgColor 2s ease-in-out
	}
	
	@keyframes changeBgColor
	{
		0%   {background: red;}
		25%  {background: yellow;}
		50%  {background: blue;}
		100% {background: green;}
	}

四，常用动画库

1.animate.css

2.gsap

五，兼容

1.Safari 和 Chrome 支持替代的 -webkit-animation 属性。Internet Explorer 9 以及更早的版本不支持 animation 属性