css动画 animation

通过关键帧来模拟动画,必须是块级元素才能产生动画
onAnimationEnd监听帧动画结束

	1、定义动画类型
		法一:@keyframes 自定义名称{
			0%/from{
				css样式
			}
			n%{
				css样式
			}
			100%/to{
				css样式
			}
			指定帧共用样式写法:
				n%,
				n2%{
					...
				}
				n4%,
				n5%{...}
			n帧出现的位置和动画的顺序没有关系,依旧是从小到大进行动画
				100%{
					...
				}
				50%{
					...
				}
				
		}
		若未设置0%或100%,会在对应的帧默认使用原始样式
		
		法二(适合只有两帧的平滑过渡,比如两张背景颜色的改变):
		@keyframes 自定义名称{
			{
				from {top: 200px;}    //从距顶端200px的位置开始,到元素最初设置的位置
				to {}
			}

	2、调用动画
		(1)调用
			animation-name:动画名1,动画名2;  相同属性后面会覆盖前面
			
		(2)定义每个动画时间:
			animation-duration:ns,ns; 只写一个默认为所有动画都在ns内完成,写多个一一对应,超出从第一个开始匹配
		
		(3)定义填充模式
			animation-fill-mode:forwards;  动画结束停在最后一帧,不还原
			animation-fill-mode:backwards;  动画开始之前,一直使用第0帧
			animation-fill-mode:both;  动画开始之前一直使用0帧,动画结束停在最后一帧 
			
		(4)定义动画次数
			animation-iteration-count:n,n,n/infinite; 对应不同动画的次数
				
		(5)延迟动画
			animation-delay:2s;  延迟2s后,动画开始
			animation-delay:-2s; 从动画开始2s后的位置立即开始动画,而不是等待2s再从动画开始2s后的位置开始动画
		
		(6)动画方向
			animation-direction:normal(0-100)/reverse(100-0)/alternate(0-100然后100-0,来回速度相同)/alternate-reverse(100-0然后0-100,来回速度相同)
		
		(7)设置动画方式
			animation-timing-function:steps(n,start/end); 分n帧(n步),立即开始/过一帧再开始,完成动画
				一帧(步)可简写成:step-start/step-end
			
			linear 	动画从头到尾的速度是相同的。 	测试
			ease 	默认。动画以低速开始，然后加快，在结束前变慢。 	测试
			ease-in 	动画以低速开始。 	测试
			ease-out 	动画以低速结束。 	测试
			ease-in-out 	动画以低速开始和结束。 	测试
			cubic-bezier(n,n,n,n) 	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 	
				
				steps例子:
					animation: dot 3s infinite steps(3,start);
					 @keyframes dot {
			            33.33% {
			                content: ".";
			            }
			            66.67% {
			                content: "..";
			            }
			            100% {
			                content: "...";
			            }
			        }
				
		(8)设置动画状态:
			animation-play-state:running/paused;  动画开始/暂停
		
		(9)简写:
			animation:动画名 填充模式 运行时间 延迟时间 ...
				延迟时间一定是在运行时间之后