css动画学习 animation

animation-name: xxx 为keyframes动画规定一个名字
animation-duration: 4s  动画过渡的时间
animation-delay:2s;  动画开始前的延迟使时间（可以是负数，表示动画从开始了多少秒开始的）
animation-iteration-count:3 
animation:example 4s infinite  名字 延迟时间 重复次数（infinite表示无穷）
animation-direction:normal reverse alternate alternate-reverse  正常播放 向后  向前向后 向后向前
如果是alternate 如果设置的播放次数是一次的话，只会执行向前一个动作，向后要第二次才会执行 . 无穷的话就是一直重复
animation-timing-function:
	-ease  从慢开始，然后加快，然后缓慢结束的动画（默认）
	-linear 速度保持相同
	-ease-in  慢速开始的动画
	-ease-out  慢速结束的动画
	-ease-in-out 开始和结束较慢的动画
animation-fill-mode:
	-none;
	-forwards;  保留最后一个关键帧的样式
	-backwards;  获取第一个关键帧的样式
	-both; 两个都要
animation: name duration ....;

@keyframes xxx{
from{backgound:red;}
to{background:yellow;}
0%{background:red;}
25%{backgraound:yellow;}
...

} 

-webkit-     /* Safari 和 Chrome */
}