transition 屬性(逐漸變色)

transition 屬性(逐漸變色)     參考網址： http://www.w3school.com.cn/cssref/pr_transition-delay.asp

    transition-property    規定設置過渡效果的 CSS 屬性的名稱。

        none        沒有屬性會得到過渡效果。

        all        全部屬性都將得到過渡效果。

        property    定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

        （例子：transition-property:width;

            -moz-transition-property: width; /* Firefox 4 */

            -webkit-transition-property:width; /* Safari 和 Chrome */

            -o-transition-property:width; /* Opera */）

 

    transition-duration    規定完成過渡效果須要多少秒或毫秒。

        time    規定完成過渡效果須要花費的時間（以秒或毫秒計）。

            默認值是 0，意味着不會有效果。

        （例子：transition-duration: 5s;

            -moz-transition-duration: 5s; /* Firefox 4 */

            -webkit-transition-duration: 5s; /* Safari 和 Chrome */

            -o-transition-duration: 5s; /* Opera */）

 

    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-timing-function: linear;

            -moz-transition-timing-function: linear; /* Firefox 4 */

            -webkit-transition-timing-function: linear; /* Safari 和 Chrome */

            -o-transition-timing-function: linear; /* Opera */）

 

    transition-delay    定義過渡效果什麼時候開始。

        time    規定在過渡效果開始以前須要等待的時間，以秒或毫秒計。

        （例子：transition-delay: 2s;

            -moz-transition-delay: 2s; /* Firefox 4 */

            -webkit-transition-delay: 2s; /* Safari 和 Chrome */

            -o-transition-delay: 2s; /* Opera */）