CSS3学习（三）动画使用总结

css3之变形处理

一、 使用方法

属性：transform
值：

    rotate(30deg度数)       //旋转
    scale(倍数)             //缩放
    skew(x角度，y角度)       //倾斜
    translate（x位移，y位移） //移动

记得不同浏览器内核的一个适配，就是加前缀-webkit-transform：…

二、同一个元素可以同时进行多种变形

一个transform可以有多个变形效果，在后面直接用空格然后添加，如：

transform:rotate(45deg) scale(1.5);
 //注意，变化先后顺序不同，结果可能不一样

三、设置变化的基准点
默认基准点是几何中心；
使用transform-origin属性设置，如：

transform-origin:top right;

动画功能：

一、Transitions属性，包含值有

    ①property           //需要改变的属性
    ②duration           //执行时间长度
    ③timing-function    //过度动画的形式,如：linear 线性，速度不变；ease-in 慢到快； ease-out快到慢； ease； ease-in-out

多动画效果同时使用，只需要在transitions的值里面用逗号隔开添加即可，如：

transitions:background-color 1s linear,color 1s linear,width 1s linear;

二、Animations属性，利用关键帧来实现更复杂的动画效果
使用步骤：
①单独定义变化的所有关键帧

@webkit-keyframes donghua{
            0%{需要变化的属性：值1；}
            25%{需要变化的属性：值2；}
            .
            .
            .
        }

②在hover或其他伪类中使用Animation属性

-webkit-animation:donghua 2s linear;