css3 transition动画

CSS3：

一、transition: <property> <duration> <animation type> <delay>

eg：

.div{width:10px;}

.div:hover{transition:width:100px 2s  ease-in-out 1s;}//1s后div原来width:10px变为100px,所花时间为2s，速度为先加速再减速。

<property> 当元素其中一个属性改变时执行transition效果
1、none(没有属性改变)；当其值为none时，transition马上停止执行。
2、all（所有属性改变）默认值；当指定为all时，则元素产生任何属性值变化时都将执行transition效果。
3、indent（元素属性名）；indent是指指定元素的某一个属性值:width,height,background,opacity...

<duration>持续时间，
单位为s（秒），默认为0

<animation type>:运动形式
1、ease：（逐渐变慢）默认值
2、linear：（匀速）
3、ease-in：(加速)
4、ease-out：（减速）
5、ease-in-out：（加速然后减速）
6、cubic-bezier：（该值允许你去自定义一个时间曲线）

<delay> 延迟多久开始执行
单位为s（秒），默认为0

例子：transition：all 1s ease 1s （如果是点击事件）
代表：点击1秒后，所有属性在1s内完成运动，而且是缓冲的效果

注意：
1 默认值： transition：all 0 ease 0，此时不会产生任何效果，因为运动时长为0

2 改变多个属性，之间用逗号隔开
div{
transition-property: width, height, transform, background
transition-duration: 1s, 1s, 1s, 1s
}

二、

tranform的属性包括：

 

1、none 表示不进行变换；

 

2、rotate 旋转            transform:rotate(20deg) 旋转角度可以为负数。

　　　　　　　　　　　　需要先有transform-origin定义旋转的基点可为left top center right bottom 或坐标值（50px 70px）。//也就是说要看要基于哪一点旋转。

 

3、skew  扭曲             transform:skew(30deg,30deg)  skew(相对x轴倾斜,相对y轴倾斜)

 

4、scale  缩放             transform:scale(2,3) 横向放大2倍，纵向放大3倍。如等比放大写一个参数即可。

 

5、translate 移动        transform:translate(50px, 50px);

 

6、perspective 镜头到元素平面的距离，所有元素都是放置在z=0的平面上，比如perspective(300px)表示，镜头距离元素表面的位置是300px;//该属性要放在动作属性之前