CSS_平滑过渡

平滑过渡

属性名: transition

• 属性值: 过渡的属性 过渡时间 速率 延迟时间

  ​ 默认值：ease 0s

• 注意点:
  transition 只能用于能够 ± 属性的属性

• 时间单位: s/ms
  0.5s => .5s
  1.5 => 1.5s

<style>
        .box{
            width: 200px;
            height: 200px;
            background: #258;
            transition:  background  5s ;
        }
        .box:hover{
            background: red;
        }
        /* 过渡一个属性 */
        /*
        input{
            width: 300px;
            height: 30px;
            transition: width 2s;
            transition: width 2s ease;
            transition: width 2s linear;
            transition: width 2s ease-in;
            transition: width 2s ease-out;
            transition: width 2s ease-in-out;
            transition: width 2s cubic-bezier(0, 1.15, 1, 0.24);
        }
        input:focus{
            width: 600px;
        }
        */
        /* 过渡多个属性 */
        /*
        input{
            width: 300px;
            height: 30px;
            border: 5px solid red;
            outline: none;
            transition: width 2s, height 2s;
        }
        input:focus{
            width: 600px;
            height: 80px;
        }
        */
        /* 能过渡的都过渡 */
        input{
            width: 300px;
            height: 30px;
            border: 5px solid red;
            outline: none;
            transition: all 2s linear  5s;
        }
        input:focus{
            width: 600px;
            height: 80px;
            border: 5px dashed blue;
        }
</style>

<div class="box"></div>
    <br><br><br>
<input type="text">