css3-animation用法简记

css3实现动画三种方式：Transform 、Transition 、Animation


Transform：只关于形变，位置变。
Transition：只关于变的过程，包括元素，时间、方式
Animation：是Transform 、Transition的结合。

animation使用方式：如下

关键帧：

@keyframes name{
	0%{
		transform:translateY(0);
	}
	30%{
		transform:translateY(-10px);
	}
	50%{
		transform:translateY(-15px);
	}
	60%{
		transform:translateY(0);
	}
	80%{
		transform:translateY(5px);
	}
	100%{
		transform:translateY(15px);
	}
}

animation语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state; 

name : 动画名称
duration:
   是动画持续时间
   取值，如：5s
timing-function:
   动画变换速率 
   取值：ease;ease-in;ease-in-out;linear;cubic-bezier
delay:
   动画执行延迟时间
   取值，如：5s
iteration-count：
   动画播放次数 
 取值：infinite（无限次），n（n次）
direction ：
   动画播放方向
   取值：normal（正向播放）、alternate（正反反正）、reverse（反向播放）、alternate-reverse（反正正反）
fill-mode ：
    动画结束时停止状态
    取值：none(没有执行动画前的状态)、forward（最后一帧）、backward(第一帧）、both(根据animation-direction轮执行forwards和backwards)
play-state：
    动画播放状态
    取值： running（播放状态）、paused（暂停状态）

做个笔记供随时查询，如有不妥之处，欢迎指点哟。