css3——过渡

css3新特性过渡
过渡动画：是从一个状态 渐渐的过渡到另外一个状态
可以让我们的页面变的更美观，更动感十足
注：现在经常与:hover一起搭配使用

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

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

代码：

 div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width 1s ease 1s,height .5s; */
            /* 如果想要写多个属性，可以利用逗号分割 */
            transition: all 0.5s;
            /* 如果想要多个属性都变化，直接写all也可以 */
        }

        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }

        /* 过渡经常与:hover 一起搭配使用 */
        /* 口诀：谁做过渡给谁加 */