7.轉場效果

一、轉場效果

1. transition-property (屬性)
   語法：transition-property: keyword
   範例7-1
   
2. transition-duration (持續時間)
   語法：transition-duration: time
   
3. transition-timing-function (轉場方式)
   語法一：transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out (效果)
   語法二：transition-timing-function: cubic(x1, y1, x2, y2) (貝茲曲線)
   可參考 http://cubic-bezier.com
   語法三：transition-timing-function: steps(number, end | start) (步進)
   end表示停留在動畫區間起始格，start表示停留在動畫區間結束格
   範例7-2
4. transition-delay (延遲時間)
   語法： transition-delay: time 如250ms，-2s (負值會從轉場效果的中途開始)
5. transition: property duration timing-function delay; (轉場效果簡寫)
6. transition 可用同時設定多組，用逗號隔開，如：
   transition: border-width 4s, height 500mx, padding 4s
7. 練習7-1-轉場效果文字：建立一個h2文字「CSS3 is easy to learn!」，滑鼠移入後2秒內會順時針旋轉二圈、文字放大4倍(4em)，移開後2秒內會逆時針旋轉二圈，文字縮回原大小。