CSS动画效果

CSS3 2D层面的变换--------------功能：元素的移动、缩放、转动、拉长或拉伸。

transform

translate() 方法

元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标）

rotate() 方法

元素顺时针旋转给定的角度单位deg。允许负值，元素将逆时针旋转。

scale() 方法

元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）

skew() 方法

参数表示倾斜角度，单位deg

transform-origin

设置基点位置（x,y），可能的值

·        top

·        center

·        bottom

·        length

·        %

CSS3 transition动画

transition

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

·        规定您希望把效果添加到哪个 CSS 属性上

·        规定效果的时长

语法:

transition:property(变换属性) duration(延续时间） timing-function（速率）delay（延迟时间)

1).property:执行变换属性：当指定的css属性改变时，过渡效果将开始。

值有三种可能：

A：none 没有属性会获得过渡效果

B：all 所有属性都将获得过渡效果

C：css属性名称列表，列表以逗号分隔。！！

2).duration：变换持续的时间

规定完成过渡所需的时间（以秒或毫秒计算），默认值0没有效果。

3).timing-function在延续时间段，变换的速率

可能的值：

ease（逐渐变慢）

linear（匀速）

ease-in（加速）

ease-out（减速）

ease-in-out（加速然后减速）

cubic-bezier(n,n,n,n)在bezier函数中定义自己的值，n取值0-1

4)变换的延迟时间

动画开始的时间，单位秒或毫秒