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;