Day 24 CSS3 < 过渡 transition>

过渡 (transition) 是可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换成另一种样式时为元素添加效果，经常和 :hover 一起搭配使用。

过渡动画 : 是从一个状态渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持( ie9以下版本) 但是不会影响页面布局

哪个属性要做过渡给谁加transition属性

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

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

       div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始;  後面两个可以省略*/
            /* transition: width 5s ease 1s; */

            /* 如果要写多个属性用 逗号"," 做分隔 */
            /* transition: width 1s, height 1s; */

            /* 若想要多个属性作变化 写all即可  (常用)*/
            transition: all 1s;
        }

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

过度效果范例

过度效果进度条范例