HTML 5 动画

@keyframes 规则

创建动画

使用from（开始）…to（结束）…法操作；
例：

		
		@keyframes move {
		
				 from{
					width: 200px;
					background-color: pink;
				}
				to{
					background-color: aqua;
					height: 500px;
					width: 500px;
					} 
				}
				

使用百分比数操作

			@keyframes move {
			
				0% {
					width: 200px;
					background-color: pink;
				}
				25% {
					background-color: aqua;
					height: 500px;
					width: 500px;
				}
				50% {
					background-color: orange;
					height: 500px;
					width: 500px;
				}
				100% {
					background-color: green;
					height: 500px;
					width: 500px;
				}
			}
			

属性

linear	动画从头到尾的速度是相同的。
ease	默认，动画以低速开始，然后加快，在结束前变慢。	
ease-in	动画以低速开始。	
ease-out	动画以低速结束。	
ease-in-out	动画以低速开始和结束。

infinite无限播放

normal 默认值，动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次
迭代的关键帧中定义的属性值。
这些都是 from 关键帧中的值
（当 animation-direction 为 “normal” 或 “alternate” 时）或 to
关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。
both 动画遵循 forwards 和 backwards 的规则。
也就是说，动画会在两个方向上扩展动画属性。
paused 指定暂停动画 测试
running 指定正在运行的动画