css3 过渡、变换与动画

过渡属性

通过c3可以在不使用flash动画或js的情况下，
为元素从一种样式变换为另一种样式时添加效果。
而c3过渡就是元素从一种样式逐渐改变为另一种的效果。
要规定两项内容：
规定你希望把效果添加到哪个css属性上； 规定效果的时长

transition-property 规定设置过渡效果的css属性名称
none 没有属性 all所有属性 property 定义过渡效果的css属性名称列表，逗号隔开

transition-duration 规定完成过渡效果需要多少时间
time

transition-timing-function 规定速度效果的速度曲线
linear 匀速 ease慢速开始变快最后变慢ease-in慢速开始 ease-out慢速结束 ease-in-out慢速开始和结束

transition-delay 定义过渡效果何时开始
time

css3的transform属性

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行位移、旋转、缩放或倾斜。

	位移	旋转	缩放	倾斜
2D	translate（x，y）	rotate（angle）	scale（x，y）	skew（x，y）
3D	translate3d（x，y，z）	rotate3d（x,y,z,angle）	scale3d（x,y,z）

css3动画

@keyframes规则用于创建动画
浏览器支持：IE10，firefox，Opera，Chrome和Safari需要前缀-webkit-
IE9以及更早版本不支持
需要规定至少两项css3动画属性，即可将动画绑定到选择器：
1，规定动画的名称：2，规定动画的时长。

animation属性

animation-name 规定绑定选择器的keyframe名称

animation-duration 规定完成动画所花费的时间，秒或毫秒计
默认为0

animation-timing-function规定动画的速度曲线
linear 匀速 ease慢速开始变快最后变慢ease-in慢速开始 ease-out慢速结束 ease-in-out慢速开始和结束

animation-delay 动画开始之前的延迟

animation-iteration-count 规定动画应该播放的次数
n 定义动画播放次数的数值 infinite 无限次播放

animation-direction 是否应该轮流反向播放动画
normal 默认值 正常播放 alternate 轮流反向播放

animation-play-state 动画的状态
animation-fiu-mode 动画开始前和结束后的其他样式