css3动画属性animation

css3 animation动画属性

一，浏览器支持情况

		IE	  Firefox	Chrome	Safari	Opera
		Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
		
		Safari 和 Chrome 支持替代的 -webkit-animation 属性。
		
		注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

二, animation是简写属性，用于设置六个动画属性

		animation-name   动画名称
		animation-duration  动画时长
		animation-timing-function  动画速度曲线。
		animation-delay  规定在动画开始之前的延迟。
		animation-iteration-count 规定动画应该播放的次数 默认1次。
		animation-direction 	规定是否应该轮流反向播放动画 默认normal。

------------------------------其他属性----------------------------------------
        animation-play-state  用于规定是否正在播放 （主要在js中控制这个状态）
        animation-fill-mode   规定对象动画时间之外的状态。none(默认) | forwards | backwards | both 

三 , @keyframe

		如需在 CSS3 中创建动画，需要学习 @keyframes 规则。
		@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
		
		当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
		通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
		规定动画的名称
		规定动画的时长
		请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
	    0% 是动画的开始，100% 是动画的完成。

			@keyframes myfirst
			{
			0%   {background: red;}
			25%  {background: yellow;}
			50%  {background: blue;}
			100% {background: green;}
			}

四，常用动画库

     animate.css
   	[动画库](https://daneden.github.io/animate.css/)