CSS3-过渡transition过渡 transition过渡属性是css3浓墨重彩的特性，过渡可以为==一个元素在不

transition过渡

transition过渡属性是css3浓墨重彩的特性，过渡可以为==一个元素在不同样式之间变化自动添加“补间动画”

兼容性

过渡从IE10开始兼容，移动端兼容良好
曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为css3过渡
优点：动画更细腻，内存开销小

transition属性基本使用

transition属性有4个要素

ransition: width==(什么属性过渡)== 1s==(动画时长单位只能是S)== linear==(变化速度曲线此为匀速)== 0S==(延迟时间不能不写也不能省略S)== ；

哪些属性可以参与过渡

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

all

如果要所有属性都参与过渡，可以写all

transition:all 1s linear 0s;

过度的四个小属性

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

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        .box1 {
            width:200px;
            height:200px;
            background-color:orange;
            transition: width 5s linear 0s;
        }
        .box1:hover {
            width:800px;
        }
        .box2 {
            width:1000px;
            height:200px;
            margin-bottom:20px;
        } 
        .box2 p {
            position:relative;
            width:200px;
            height:200px;
            background-color:orange;
            left:0;
            transition:left 1s linear 0s;

        }  
        .box2:hover p{
            left:1000px;
        }
        .box3 {
            width:200px;
            height:200px;
            background-color:red;
            transition:background-color 1s linear 0s;
            margin-bottom:10px;
        }
        .box3:hover {
            background-color:green;
        }
        .box4 {
            width:200px;
            height:200px;
            background-color:red;
            margin-bottom:10px;
            border-radius:0;
            transition:border-radius 1s linear 0s;
        }
        .box4:hover {
            border-radius:50%;
        }
        .box5 {
            width:200px;
            height:200px;
            background-color:orange;
            transition:transform 1s linear 0s;
            margin-bottom:20px;
        }
        .box5:hover {
            transform:scale(1.2) rotate(360deg);
        }
        .box6 {
            perspective:300px;
            width:200px;
            height:200px;
            border: 1px solid #000;
            margin-bottom:20px;
        }
        .box6 p {
            width:200px;
            height:200px;
         
            background-color:orange;
            transition:transform 1s linear 0s;
        }
        .box6:hover p{
            transform:rotateX(360deg) rotateY(360deg);
        }
        .box7 {
            width:200px;
            height:200px;
            background-color:orange;
            border-radius:0;
            transition:all 1s linear 0s;
            margin-bottom:20px;
        }
        .box7:hover {
            width:400px;
            height:160px;
            background-color:green;
            border-radius:50%;
        }
        .box8 {
            perspective:300px;
            width:200px;
            height:200px;
            border: 1px solid #000;
            margin-bottom:20px;
        }
        .box8 p {
            width:200px;
            height:200px;
         
            background-color:orange;
            transition:transform 1s linear 0s;
        }
        .box8:hover p{
            transform:rotateY(360deg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">
        <p></p>
    </div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6">
        <p></p>
    </div>
    <div class="box7"></div>
    <div class="box8">
        <p></p>
    </div>
</body>
</html>