过渡

一、基本概念

在css3引入transition这个概念之前，css是没有时间轴的，也就是说，所有的动画效果，都是即时完成。

比如这里：

html代码：

<img src="dog.jpg">

css代码：

img{
    width: 200px;
    height: 200px;
}
img:hover{
    width: 400px;
    height: 400px;
}

这里我鼠标移入图片上时，图片会立即变大，整个过程瞬间完成。

 

二、语法

transition: property duration timing-function delay;

 

2.1、property  和 duration

这俩个规定设置过渡效果的css属性的名称和持续的时间，property可以设置准确的值（width、height...）或者all，该值表示所有都将获得过渡效果。duration可以设置确切的秒数。

img{
    width: 200px;
    height: 200px;
    transition: width 1s,height,1s; // transition: all 1s;也可实现
}

上面代码在后面加了过渡属性，现在整个变化过程是平滑的，持续1s时间

 

2.2、timing-function

这个属性规定了速度效果的速度曲线，有以下6个值：

• linear  匀速
• ease  慢速开始，然后变快，最后变慢  （默认值）
• ease-in  慢速开始
• ease-out 慢速结束
• ease-in-out  慢速开始和结束
• cubic-bezier(n,n,n,n)  在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition: all 1s linear;

上面代码新增了timing-function属性，并赋值为linear，这样整个过渡，将会在一秒钟内匀速完成。

 

2.3、delay

这个属性定义过渡效果何时开始，可以设置具体的秒数来延迟执行。

transition: all 1s linear 1s;

上面代码新增了1秒钟的延迟，整个过渡一秒钟后，将会在一秒钟内匀速完成。

 

三、补充

3.1、简写方式，上面其实都是简写方式，也可以分解成：

img{
    width: 200px;
    height: 200px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 1s;
}
img:hover{
    width: 400px;
    height: 400px;
}

 

3.2、前缀

ie10+、firefox、chrome、opera支持transition属性，safari浏览器需要添加 -webkit- 前缀。

 

3.3、支持属性

不是所有的css属性都支持过渡，完整的列表查看这里 http://oli.jp/2010/css-animatable-properties/，还有具体的效果 http://leaverou.github.io/animatable/。

 

3.4、注意点

transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态，比如，高度从0px到100px，但是如果从auto到100px，则不会产生动画效果，类似的效果还有display：none到dispaly：block，background: url(foo.jpg)到url(bar.jpg)等等。

 

3.5、局限性

• 需要事件触发，没法在网页加载时，自动发生
• transition是一次性的，不能重复发生，除非一再触发
• transition只能定义开始状态和结束状态，不能定义中间状态。