CSS3过渡属性(Transition)

CSS3中Transition过渡属性

transition-property：	需要的过渡样式，默认为all
transition-duration：	运动时间默认为0s
transition-delay：	延迟时间默认为0s
transition-timing-function：	A.ease：（慢速开始，然后变快，然后慢速结束）  B. linear：（匀速）  ease-in：(加速) C.ease-out：（减速） D.ease-in-out：（先加速后减速） E.cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）http:cubic-bezier.com F.steps（） 实现一个关键逐帧动画的功能

代码展示：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            /* 线性渐变，详细属性可查我的往期文章 */
            background-image:linear-gradient(to left ,blue, red);
            /* 过渡样式 */
            transition-property: all;
            /* 运动时间 */
            transition-duration: 3s;
            /* 延迟时间 */
            transition-delay: 1s;
            /* 运动方式  匀速运动*/
            transition-timing-function: ease;
        }
        div:hover{
            width: 500px;
            height: 100px;
        }
    </style>

运行结果：