博学谷 - CSS3笔记03 - 过渡

1.transition
使用口诀:
谁做过渡给谁加

语法:

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

• 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都
  变化过渡， 写一个all 就可以。
• 花费时间： 单位是 秒（必须写单位） 比如 0.5s
• 运动曲线： 默认是 ease （可以省略）
• 何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）

2.demo:

        .box1 {
            width: 200px;
            height: 20px;
            border: 1px solid red;
        }

        .box2 {
            width: 0px;
            height: 20px;
            transition: all 3s;
        }

        .box1:hover .box2 {
            background-color: red;
            width: 200px;
        }

    <div class="box1">
        <div class="box2"></div>
    </div>

3.效果:
颜色会渐变

4.文章参考链接
a. https://www.boxuegu.com/
b. https://www.w3school.com.cn/css/css3_transitions.asp