过渡是最简单的动画，因为只能控制开始和结束时间（延时delay和时长duration），所以只能展示一套组合拳；

　　transition　　//property和duration一般为必填项，后两个默认为ease和0；

　　　　transition-property　　/　　transition-duration　　/　　transition-timing-function　　/　　transition-delay;

　　　　transition-property:　　//要进行过渡的属性名称；

　　　　transition-duration:　　//过渡时间，即动作时长；

　　　　transition-timing-function:　　//动作时间曲线，控制动作进行中的快慢变化节奏；

　　　　transition-delay:　　//动作延时，用来对动作开始时间进行延时设置；

　　过渡一般与hover结合使用；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            background:yellow;
            transition: width 2s 2s,height 4s 2s,background 6s 2s;
        }
        div:hover{
            width:200px;
            height:400px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>