CSS基础 （8）

过渡

transition过渡属性可以为一个元素在不同样式之间变化自动添加补间动画。

兼容性
过渡从IE10开始兼容，移动端兼容良好，过渡的动画更加细腻，内存开销小。

transition属性的基本使用

transition属性的四个要素:

	transition: width 1s linear 0s;

第一个要素：什么属性要过渡？
第二个要素：动画时长
第三个要素：变化速度的曲线
第四个要素：延迟时间

哪些属性可以设置过渡：
所有数值类型属性，都可以参与过渡，比如width，height，left，top，border-radius等。
背景颜色和文字颜色都可以被过渡。
所有变形（包括2D和3D）都可以被过渡。

如果要所有的属性参与过渡：
可以使用all

	transition: all 1s linear 0s;

all参数不可以乱用，会引发效率问题。

示例：

	* {
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
            transition: width 5s linear 0s;
            margin-bottom: 100px;
        }
        .box1:hover{
            width: 800px;
        }
        
        .box2 p {
            position: relative;
            width: 200px;
            height: 200px;
            left: 0;
            background-color: orange;
            transition: left 10s linear 0s;
            margin-bottom: 200px;
        }
        .box2:hover p {
            left: 1000px;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: background-color 5s linear 0s;
            margin-bottom: 200px;
        }
        .box3:hover {
            background-color: orange;
        }
        .box4 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 100px;
            border-radius: 0;
            transition: border-radius 5s linear 0s;
        }
        .box4:hover {
            border-radius: 50%;
        }

        .box5 {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-bottom: 10px;
            transition: transform 2s linear 0s;
        }
        .box5:hover {
            transform: scale(1.2) rotate(360deg);
        }

        .box6 {
            perspective: 300px;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        .box6 p {
            width: 200px;
            height: 200px;
            background-color: orange;
            transition: transform 2s linear 0s;
        }
        .box6:hover p {
            transform: rotateX(360deg) rotateY(360deg);
        }

        .box7 {
            width: 200px;
            height: 200px;
            background-color: orange;
            border-radius: 0%;
            transition: all 2s linear 0s;
        }
        .box7:hover {
            width: 400px;
            height: 150px;
            background-color: rgb(0, 255, 0);
            border-radius: 50%;
        }

过渡的四个小属性

属性	意义
transition-property	哪些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线（缓动效果）
transition-delay	延迟时间

过渡的缓动效果

缓动参数
transition属性的第三个参数是缓动参数，也是变化速度曲线。

常用的缓动参数

示例：

	.box8 {
            border: 1px solid #000;
        }
        .box8 p {
            width: 60px;
            height: 60px;
            background-color: orange;
            position: relative;
            left: 0;
            margin-bottom: 10px;
            transition: left 3s linear 0s;
        }
        .box8 p:nth-child(1){
            transition-timing-function: linear;
        }
        .box8 p:nth-child(2){
            transition-timing-function: ease;
        }
        .box8 p:nth-child(3){
            transition-timing-function: ease-in;
        }
        .box8 p:nth-child(4){
            transition-timing-function: ease-in-out;
        }
        .box8 p:nth-child(5){
            transition-timing-function: ease-out;
        }
        
        .box8:hover p {
            left: 1800px;
        }