CSS3 炫酷简单动画：变形（transform）、过渡(transtion)、动画(animation)

说明

• Transform：对网页对象进行变形操作
• Transitions：CSS3 属性过渡变化
• Animations：实现CSS3样式分步式关键帧动画演示效果

1、关于Transform相关的几个属性的用法

• transform中使用多个属性时却需要有空格隔开。
• transform-origin 属性允许您改变被转换元素的位置，例：transform-origin:50% 50% 0。
• rotate()：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):

2、关于animation相关的几个属性的用法

transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。
3、关于animation相关的几个属性的用法

1、animation-name： 用来定义一个动画的名称

语法： animation-name: none | mymove |多个名字;

none为默认值，当属性值是none时，表示没有任何的动画效果。

mymove是由Keyframes创建的动画名 mymove要和Keyframes中的mymove一致，如果不一致,将不能实现任何动画效果；
当我们同时给animation添加几个动画的时候，我们只需要用逗号“，”隔开就可以。

2、animation-duration ：指定元素播放动画所持续的时间长

语法： animation-duration: 0 | time

time：为数值，单位为秒S，他的默认值为“0”。
这个属性跟transition中的transition-duration使用方法是一样的

3、animation-delay： 指定元素动画什么时间开始

语法： animation-delay: time；
time：表示的是时间，单位是秒S，默认数值是0。

4、animation-iteration-count： 指定元素播放动画的循环次数

语法： animation-iteration-count: value；
属性值是1时，是默认值，当属性值是infinite表示的意思是无限循环的。

5、animation-direction：指定元素动画播放的方向

语法： animation-direction: normal|reverse|alternate|alternate-reverse

normal 动画的运动形式是正常的，这是默认值。

reverse 动画的播放形式是反向的。

alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

6、animation-timing-function：动画的播放方式

语法： animation-timing-function: ease|ease-in|ease-in-out|linear|cubic-bezier(n,n,n,n)；

linear 动画运动的开始和结尾都是匀速的。

ease 默认。动画刚开始的时候速度是慢的，然后加快，最后变慢

ease-in 动画从慢的速度开始。

ease-out 动画从慢的速度结尾。

ease-in-out 动画的开始和结尾都是慢的。

cubic-bezier(n,n,n,n) 在 http:cubic-bezier.com网址当中可以设置自己需要的运动方式

step-start 动画运动的时候从最左边的端点为开始点
step-end 动画运动的时候从最后的端点作为开始点，这个是默认值

7、animation-fill-mode ：当动画不播放时，要应用到元素的样式
语法： animation-fill-mode: none|forwards|backwards

none 默认值

forwards 在动画结束后，动画停留在结束的位置

backwards 在动画结束后，动画回到最初的位置