css3 动画

属性变化
/*transition*/
/*
transition-property			规定设置过渡效果的 CSS 属性的名称。
transition-duration			规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay			定义过渡效果何时开始。
*/
/*
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
*/

旋转 缩放 扭曲
/*
transform rotate | scale | skew | translate |matrix; 2d
*/
/*
rotate 旋转 deg
translate(x, y) 移动 translateX,  translateY
scale(x, y) 放大缩小 scaleX, scaleY	      transform-origin(x, y)来改变元素的基点
skew(x, y) 扭曲 skewX() skewY()           transform-origin(x, y)来改变元素的基点
matrix(<num>, <num>, <num>, <num>, <num>, <num>)
*/

/*
动画属性名，也就是我们前面keyframes定义的动画名
-webkit-animation-name: 'test';

动画持续时间
-webkit-animation-duration: 10s;

动画频率，和transition-timing-function是一样的
-webkit-animation-timing-function: ease-in-out;

动画延迟时间
-webkit-animation-delay: 2s;

定义循环资料，其默认值为“1, infinite为无限次
-webkit-animation-iteration-count: 10;

定义动画方式 alternate 动画运行结束，动画回放
-webkit-animation-direction: alternate;

主要是用来控制元素动画的播放状态。running和paused其中running为默认值。
可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，
我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。
另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。
这个属性目前很少内核支持，所以只是稍微提一下。
animation-play-state: running;
*/

/*
IDENT(动画名称) Percentage(百分比值) Properties(css属性名)
@keyframes IDENT {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
或者全部写成百分比的形式：
@keyframes IDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
*/