CSS3 _ CSS 过渡

CSS 过渡

CSS过渡（有点类似补间动画）可以使元素从一种状态到另外一种状态的这个过程表现得更加柔顺。如下例所示，把鼠标放上去就能看到过渡动画了。

反清

浏览器兼容性

下表是每种浏览器支持相应属性的最低版本，其中-ms-、-webkit-、-moz-、-o-这些前缀，指每种浏览器支持3D变换属性的最低版本浏览器中，需要加上这些前缀，比如在4.0版本的Firefox浏览器中如果要想用transition属性，则需要写成-moz-transition属性；剩下的以此类推。

属性
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -webkit-
transition-delay	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -webkit-
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -webkit-
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -webkit-
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -webkit-

如何使用CSS过渡

为了创建过渡效果，就必须定义好两点：

过渡效果想绑定哪个即将发生变化的CSS属性
过渡效果的总时长

如果总时长没有定义，那则不会显示出过渡效果，因为缺省状态下默认时长为0，那就代表着没有过渡效果。

div {
    width: 100px;
    height: 100px;
    background: #46acb6;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

上面定义的这个过渡效果是针对该元素width属性的值发生改变的情况下而触发的，如下例所示，当鼠标悬浮在此div元素上，width属性变成300px，因此，触发上述设置的2秒长的过渡效果。

div:hover {
    width: 300px;
}

运行一下

多组过渡效果

如下所示，一次性定义多组过渡效果，绑定了该元素的width属性和height属性。

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

运行一下

定义过渡效果的速度

贫道之前展示的过渡效果都是缓慢开始，然后变快，最后缓慢结束，那么如果想不一样呢呢？那就要说到transition-timing-function这个属性了。其取值范围如下所示：

ease - 过渡效果的速度是缓慢开始，然后变快，最后缓慢结束（默认）
linear - 线性匀速变化
ease-in - 缓慢起步
ease-out - 缓慢结束
ease-in-out - 缓慢起步并缓慢结束
cubic-bezier(n,n,n,n) - 自定义速率变化

案例如下，试试呗~

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

运行一下

对过渡效果进行延时生效

通过CSS中的transition-delay属性可以让过渡效果延时指定时长后再生效。如下例所示，延时1秒：

div {
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}

运行一下

给transform变换也加上过渡效果

前面两节说的transform变换也可以通过这种方式加上过渡效果，具体操作如下所示：

div {
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
}

运行一下

使用transition属性通吃

洒家先举一个例子，如下所示：

div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

运行一下

洒家是一个粗人，洒家是一个文盲，洒家没有文化，洒家是一个懒汉，洒家想少用一点属性名，于是洒家只用transition属性通吃了上述4中属性，于是乎，如下所示：

div {
    transition: width 2s linear 1s;
}

运行一下

CSS 过渡

推广