一、transition 过渡

过渡（transition）
当某元素某属性发生变化时，将切换方式变成连续的。
可以创建一些效果。

transition-property: ;指定执行的属性
transition-duration: ;过渡持续时间
transition-timing-function: ;过度的时间函数
可选值：
ease慢-快-慢
linear匀速
ease-in慢速开始
ease-out减速运动
ease-in-out先加速后减速
cubic-bezier（）指定时间函数
steps（）执行步骤
transition-delay: ;过渡效果延时，等待响应时间

二、代码

鼠标进入box1，触发transition，右移且放大。鼠标移出则变回原来的状态。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box1{
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
        }
        .box2
        {
            background-color: #bbffaa;
            /* transition: height  2s; */
            transition: all  2s;
            /* transition-property: width,height,color,margin-left; */
            transition-duration: 1s;
            transition-timing-function:unset;
            transition-delay:200ms;
        }
        .box1:hover .box2
        {
            width: 200px;
            height: 200px ;
            background-color: tomato;
            margin-left:  500px; ;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">

        </div>
    </div>
</body>
</html>