前端transition简介

CSS3 Transition

1、Transition的基本用法

首先，在css3未引入Transition之前，css不存在时间轴，即由一个状态到另一个状态是瞬时的。

img{
    height:15px;
    width:15px;
}

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

上面的代码，是当鼠标划到img上标签的时候，图片的大小会立即发生变化，不存在中间过渡。

transition的基本作用是在两个状态变换之间加一个过渡，进行一段时间的缓冲。 比如：

    img{
        transition: 1s;
    }

加上上面的代码，两个状态之间的变换（width和height）会出现1秒的过渡效果； 也可以单独未height和width加上过渡时间，那样的话未加过渡效果的height/width还是会瞬间实现状态转换；

img{
    transition: 1s width;
}

上面代码就是单独未width添加过渡，而height未添加过渡；这会呈现出height瞬间实现状态转换，width的状态转换之间存在1秒的过渡。

2、transition的属性

transition-property: none|all|property;
规定应用过渡的 CSS 属性的名称。

· none没有属性会获得过渡效果。
· all所有属性都将获得过渡效果。
· property定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 比如：

img{
    transition: 2s height, 1s width;
}

以上代码，使图片的高的状态改变经过2秒，宽经过1秒。

transition-duration:time
规定完成过渡效果需要花费的时间（以秒或毫秒计）。

transition-delay: time;
规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

img{
    transition-property: height;
    transition-duration: 1s;
     transition-delay: 1s;
}

以上代码，意思是height属性进行时间过渡，时间长短为1秒，运行开始后的1秒后进行过渡；

在同一行transition语句中，可以分别指定多个属性。 比如：

img{
    transition: 2s height, 1s width;
}

在以上代码中，height和width的过渡虽然经过的时间是不同的，但是过渡开始的时间是相同的。如果需要让过渡时间出现前后分别进行，就需要transition-delay属性。比如：

img{
    transition: 1s height, 1s 1s width;
}

上面代码指定，width在1秒之后，再开始变化，也就是延迟（delay）1秒。
delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n);
规定过渡效果的时间曲线。默认是 "ease"(逐渐放慢)。

除了ease以外，其他模式还包括
（1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速
（4）cubic-bezier函数：自定义速度模式

最后那个cubic-bezier，可以在工具网站进行调试。

transition属性总写

img{
    transition: 1s 1s height ease;
}

完全等于：

img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

(完)