css3的动画属性

一、css3的过渡属性：

1，transition-property

　　检索或设置对象中的参与过渡的属性。

2，transition-duration

　　检索或设置对象过渡的时间。

3，transition-delay

　　检索或设置对象延迟过渡的时间。

4，transition-timing-function

　　检索或设置对象过渡的动画属性。

简写方法：

　　transition:属性值1 属性值2 属性值3 属性值4；

　　属性值1：需要参与过渡的属性/all（默认值）

　　　　能支持过渡的属性都会被选中进行过渡变换。

　　属性值2：过渡的时间，单位（s  ms ）（动画持续多久的时间）

　　属性值3：延迟的时间，单位（s  ms）（鼠标放上去延迟的时间，延迟后开始过渡）

　　属性值4：动画的类型（匀速/linear 匀加速 匀减速 先加速后减速  贝塞尔曲线 。。。）

需要注意的地方：transition 必须通过鼠标事件触发，例如：鼠标滑过   ：hover

有了过渡属性，我们还差的就是过渡的动画了，有平移 旋转 放大 缩放 等。这些动画都是在一个2D的平面空间内完成的，这里用到的变形属性就是transform了。

css3-2D位移：

　　transform:translate(参数1 参数2);（参数就是在坐标轴XY轴上的距离，当然可以为负数，正值往右向下，负值往左向上。）

　　　　参数1：在坐标轴X轴移动的距离

　　　　参数2：在坐标轴Y轴移动的距离

　　单独设置X/Y：transform:translateX/Y(参数)；

css3-2D缩放：

　　transform:scale(参数1 参数2);（参数0-1以内为缩小，大于1为放大 相同参数写一个就可以）

　　　　参数1：在坐标轴X轴缩放的比例

　　　　参数2：在坐标轴Y轴缩放的比例

　　单独设置X/Y：transform:scaleX/Y(参数)；

css3-2D旋转：

　　transform:rotate(参数);

　　　　参数单位deg 默认绕着中心点转）

　　单独设置X/Y：transform:rotateX/Y(参数)；

css3-2D倾斜：

　　transform:skew(参数）

　　　　单位deg

　　单独设置X/Y：transform:skewX/Y(参数)；

这些的变形原点都是默认的中心位置，我们也是可以可以改变的！

transform-origin:水平方向 垂直方向     /     left right    /    10px 10px    /    50%;

如果有两个功能函数呢？

我们一般都是先写位置  再写旋转。这样有一个好处就是比较规范 不容易出BUG，兼容性更好。