1.8 过渡

• 简写
• 单独属性

简写

    <style>
        div.test {
            width:100px;
            height:100px;
            background:red;
            
            transition:width 1s ease-in-out 500ms ;
        }

        div:hover {
            width:300px;
        }
    </style>
    
    
    <div class="test"></div>

还必须不能是内联方式的样式；不明所以；

单独属性

    <style>
        div.test {
            width:100px;
            height:100px;
            background:red;

            transition-property: width;
            transition-duration: 2s;
            transition-timing-function: ease-in-out;
            transition-delay: 500ms;
        }

        div:hover {
            width:300px;
        }

• transition-property 指定需要变化的属性

none        没有属性会获得过渡效果。
all         所有属性都将获得过渡效果。
property    定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

• transition-duration 变化时间

s、ms

• transition-timing-function 变化效果

linear          规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease            规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in         规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out        规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out     规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

• transition-delay 变化延迟

s、ms