CSS3过渡

浏览器支持情况

CSS3过渡语法：

transition：property duration [ timing-function delay ]

默认值：看每个独立属性
适用于：所有元素，包含伪对象:after和:before
继承性：无
动画性：否

属性	说明
transition	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的 CSS 属性的名称
transition-duration	定义过渡效果花费的时间，默认0
transition-timing-function	规定过渡效果的时间曲线，默认`ease`
transition-delay	规定过渡效果何时开始，默认0

transition-timing-function：

属性值	说明
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
step(num,[end])	按照规定的步数完成动画
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

建议：http://cubic-bezier.com/ 这个网站可以帮助我们去定义动画，或者是打开控制台去调整

案例

<style>
    /*指定宽度、颜色进行过渡*/
    .box{
        width:200px;
        height:200px;
        background:red;
        transition:width 2s;
    }
    .box:hover{
        width:400px;
        background:yellow;
    }
</style>
<body>
    <div class="box"></div>
</body>

注：如果没有指定动画时间，transition将没有任何效果，因为默认值是0。

/* 在一个例子中使用所有过渡属性 */
.box{
      width: 200px;
      height:200px;
      background:red;
      transition-property: width;
      transition-duration: 1s;
      transition-timing-function: linear;
      transition-delay: 2s;
      /* 相应简写 */
      transition: width 1s linear 2s;
      /* 动画属性 时间  动画方式  延迟 */
}
.box:hover{
      width: 300px;
}

/*要添加多个样式的变换效果，添加的属性由逗号隔开*/
.box{
      width: 200px;
      height:200px;
      background:red;
}
.box:hover{
      width: 300px;
      height:400px;
}
.box{
      transition: width 2s, height 1s;
}