动画定义及调用

定义动画

	@keyframes 动画名{
		关键帧
		from{} ->0%
		to{}  ->100%
		------------------
		0%{}->0s
		10%{} ->0.5s
		20%{}
		30%{}
		100%{} ->5s
	}
	带浏览器前缀写法，需要将前缀写到@和keyframes之间，@-webkit-keyframes

使用动画

	animation-name: 动画名   ->必需
	animation-duration: 动画执行的时间   ->必需
	animation-delay:动画延迟时间
	animation-timing-function:动画执行的效果
	animation-iteration-count: 数字/infinite(无限次)
	复合写法：
		animation: 动画名  动画执行的时间  动画延迟时间 动画执行的效果 次数;
	暂停动画
		animation-play-state:running/paused(暂停)
	动画执行的方向
		animation-direction:normal(0%-100%)/reverse(100%-0%)/alternate(正反交替)
	动画停留的位置
		animation-fill-mode: forwards(动画停留到最后一个关键帧)

动画和过渡的区别
1. 过渡需要借助hover，动画可有可无
2. 过渡只有开始和结束两种状态，动画可以很多个
3. 动画执行执行无限次