过渡Transition

一、什么是过渡

使用css的属性值在一段时间内平滑的过渡

比如，鼠标悬停后，背景色在1s内，由白色平滑的过渡到红色

1）指定四个要素

[1]过渡属性，如background、color等

[2]过渡所需时间

[3]过渡函数，即过渡的速度、方式等

[4]过渡延迟时间，表示开始执行的时间

2）触发过渡

通过用户的行为触发，如点击、悬浮等

.a:hover

二、4个属性

1.过渡属性：哪些属性进行过渡

transition-property: none|==all==|property|自定义;

多个属性用逗号隔开

可设置进行过渡的属性：（就是在:hover中进行了设置的属性，将要过渡的属性，只有在这里面设置了过渡属性，==这些属性的过渡完成时间，过渡函数才会生效==）

(1)颜色属性

(2)取值为数值的属性

(3)转换属性

(4)渐变属性

(5)阴影属性

/*过渡属性*/
transition-property:background-color,box-shadow,transform;
/*过渡完成时间*/
transition-duration: 4s;
/*过渡函数，要加私有前缀*/
-o-transition-timing-function:linear;

#box1:hover{
    transform:translate(3px,-10px);
    box-shadow:0px 0px 10px 10px #ccc;
    background-color: green;
    width: 300px;
}

2.过渡时间：持续的时间

transition-duration: s|ms;

默认值为0，意味着不会有效果，==所以必须设置transition-duration属性==

3.过渡函数：过渡的效果

transition-timing-function: ;

取值：

ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果

linear：匀速

ease-in：规定以慢速开始，加速效果

ease-out：规定以慢速结束，减速效果

ease-in-out：规定以慢速开始和结束，先加速后减速效果

4.过渡延迟：多长时间之后开始执行

transition-delay: s|ms;

改变元素属性值后多长时间开始执行过渡效果

5.简写属性：transition

transition属性是一个简写属性，用于设置四个过渡属性

语法：transition: property duration timing-function delay;

顺序可以改变

#box{
    width: 200px;
    height: 200px;
    background-color: #1fb57b;
    transition: background 4s linear 1s;
}
#box:hover{
    background-color: red;
}

实例：

#box1{
    background-color:red;
    width: 200px;
    height:200px;
    margin:200px auto;
    /*简写属性*/
    transition: all 3s 1s linear; /*注意！！transition属性不写在:hover里面！*/
}
#box1:hover{
    transform:translate(3px,-10px);
    box-shadow:0px 0px 10px 10px #ccc;
    background-color: green;
    width: 300px;
}