CSS3 Transition

CSS3 transitions可以改變css屬性的值,在某個期間內做出變化,類似jQuery.animate()

語法結構如下:

.example {
transition-property: background-color;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 1s; }

transition-property: 指定你要變化的CSS屬性

transition-duration: 指定transition從開始到結束的變化時間,在數字後面加上s就是以秒計算,用ms就是微秒

transition-timing-function: 根據時間的進行去改變屬性值的變化速率

transition-delay: 可以指定秒或微秒來延遲transition觸發的時間

簡潔的寫法:

.example { transition: background-color 2s ease-in 1s; }

如果想在同個元素上定義複數個transitions,可以用下面寫法:

.example {
transition: background-color 2s ease-in 1s, width 2s ease-in-out, height 3s ease-out; }

範例:

.example {
background-color: green; transition: background-color 2s ease-in 1s; width:100px; height:100px; }

.example:hover { background-color: blue }

與大家分享...
CSS3 Transition
Facebook
0CSS3 Transition
Google+
0CSS3 Transition
Pinterest
0CSS3 Transition
email
0 回復

發表評論

想要留言嗎?
歡迎歡迎!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *