CSS样式中过渡引入transition的用法

transition可以使元素在不同状态（初始状态，最终状态）的切换不突兀。

transition的用法：

        transition: 2s；   表示过渡时间为两秒。

        transition: 2s 3s;         两个时间,第一个是过渡时间2s,第二个是延迟时间 3s。

        transition:2s background-color;        只有背景颜色有过渡效果 。格式： 过渡时间 属性名。

        transition: 2s background-color,2s 1s border-radius;       表示先过渡背景颜色2s,等背景色过渡完1s后，边框圆角过渡2s 。格式：执行过渡时间 延迟时间 属性名。

下面举一个例子，可以更好的理解：

.box1{

        width: 100px;

        height: 100px;

        background-color: #00f;

        transition:2s;      

}

.box1:hover{

        background-color: #f00;         //悬浮状态背景颜色变为红色

        /* transition: 2s; */        /* 这句话写在元素的初始样式里中，最好不要写在该元素的悬停状态：hover中，否则鼠标移开时，没有过渡效果，还是很突兀。写在初始样式里，移进移出都有过渡效果。 */

}