transition：过渡属性详解

transition为css3加入新特性
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            margin:100px auto;

            /* 过渡的属性详解*/
            /* 过渡属性*/
            /* 如果希望所有的属性都发生过渡 使用过all*/
            transition-property: all;
            /* 过渡持续时间*/
            transition-duration:4s;
            /* 运动曲线*/
            /* linear 线性  ease ease-in ease-out  ease-in-out :先加速后减速 */
            transition-timing-function: ease-in-out;
            /* 过渡延迟*/
            transition-delay: 1s;
            /* 简写*/

            transition:width 4s ease-in-out 0s;
        }

        .box:hover{
            width: 600px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>