说说css3动画效果那点事儿（一）

“H5，CSS3很强大呀，CSS3动画效果很好呀”，今天，我们便来初识一下CSS3的魅力吧……

1. animation //CSS3动画，从一种样式转变为另一种样式的效果

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

参数意义

name ／／绑定到选择器的keyframe名称，默认值none，所以animation必须要有这个参数，语法@keyframes  name｛ keyframes－selector ｛css－style｝ ｝

duration ／／完成动画所需要的时间，默认为0，所以animation必须要有时间

timing-function ／／速度曲线，默认是ease（低速开始，变快，低速结束），ease-in(低速开始)，ease－out(低速结束)，ease-in-out（低速开始和结束，虽然个人觉得跟ease效果差不多，不过ease整体速度更快），linear（相同速度）；

delay ／／规定动画何时开始，负数指动画马上开始，但跳过相应的数值进入动画，默认为0；

iteration-count ／／规定动画的播放次数，默认值是1，可填n或者infinite（无限次播放）；

direction ／／规定动画是否轮流反向播放动画，normal（默认值，正常播放），alternate（轮流反向播放）

play-state ／／规定动画是否运行或暂停，默认值running（正在播放），paused（已暂停）

fill-mode ／／规定动画是在动画之前或之后，none（默认值，无），forwards（当动画完成后，保持最后一个属性值，即在最后一个关键帧中定义），backwards（在animation-delay的一段时间内，在动画显示之前，在第一帧中定义），both（向前向后模式都被应用）

2. transform ／／允许对元素进行旋转，倾斜，缩放或移动，列常用的4个元素，其中旋转、缩放、倾斜都可以通过transform-origin属性重置元素的原点，但其中的translate适中以元素的中心点进行位移

rotate（30deg）／／顺时针旋转30角度，负数表示逆时针旋转

translate（20px，10px）／／表示位移，x方向（右）20像素，y方向（上）10px，负数则是相反的

scale（1.5） ／／缩放，表示放大的倍数，即（x和y方向均放大1.5倍），scale（a，b）表示x轴放大a倍，y方向放大b倍

skew（a，b）／／倾斜（扭曲），表示x方向逆时针方向a角度，y方向顺时针旋转b角度

3. transition ／／表示过渡，语法：transition: property duration timing-function delay;

property ／／过渡效果的名称

duration ／／过渡效果的时间

timing-function ／／效果的速度曲线，同animation

delay ／／效果开始的时间

未完待续…………（本次语法讲的稍多）

参考网址：http://www.alixixi.com/web/a/2013112291744.shtml

http://www.w3cplus.com/content/css3-transform

http://www.w3school.com.cn