CSS3 Transition Transform Animat…

Transition 过渡

transition-property ://指定过渡的性质，

transition-duration://指定这个过渡的持续时间

transition-delay://延迟过渡时间

transition-timing-function://指定过渡类型

ease | linear | ease-in | ease-out | ease-in-out |cubic-bezier

ease表示越来越慢

linear表示线性

ease-in表示先慢后快

ease-out表示先快后慢

ease-in-out表示先慢后快再慢

Transform 属性：拉伸，压缩，旋转，偏移。

transform: skew(35deg);偏斜35°

-->第一个参数对应X轴，第二个参数对应Y轴。第二个参数未提供，则默认值为。

transform:scale(1, 0.5);比例，X、Y轴的比例

transform:rotate(45deg);旋转45°

transform：translate(10px, 20px); 基于XY轴重新定位元素

Animation

animation-name: none | IDENT;

-->IDENT是由Keyframes创建的动画名

animation-duration:<time>;

-->指定元素播放动画所持续的时间长，取值:<time>为数值，单位为s(秒)。

animation-timing-function:ease | linear | ease-in | ease-out |ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) ;

-->元素根据时间的推进来改变属性值的变换速率。

animation-delay: <time>;

-->指定元素动画开始时间。

animation-iteration-count:infinite |<number> ;

-->元素播放动画的循环次数，其默认值为“1”，infinite为无限次数循环。

animation-direction: normal | alternate;

-->检索或设置对象动画在循环中是否反向运动，默认值为normal，

normal时，动画的每次循环都是向前播放；

alternate，动画播放在第偶数次向前播放，第奇数次向反方向播放。

animation-play-state:running | paused ;

-->控制元素动画的播放状态。有两个值，running和paused,running为默认值。

animation-fill-mode：none | forwards | backwards |both 

-->检索或设置对象动画时间之外的状态

取值：

none：默认值。不设置对象动画之外的状态

forwards：设置对象状态为动画结束时的状态

backwards：设置对象状态为动画开始时的状态

both：设置对象状态为动画结束或开始的状态

transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值

RGBA(R,G,B,A)

取值：

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

A：Alpha透明度。取值0~1之间。