CSS3-transition,過渡實例


過渡:transition【由Webkit內核瀏覽器提出】
    通過CSS實現元素從一個樣式漸變成另一個種。    

      
      IE不支持,其他需后綴。

  transition:transition-property/duration/timing-function/delay的縮寫。
    transition : <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, ... ];

    transition-property:變換的屬性名。
      none、all、一個或多個<property>(逗號分隔)。

    transition-duration:持續時間。單位s或ms。
      <time>默認為0。無過渡效果。

    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.25,0.1,0.25,1)
      ease-out:以慢結束,等於cubic-bezier(0,0,0.25,1)
      ease-in-out:以慢開始和結束,等於cubic-bezier(0.42,0,0.58,1)
      cubiz-bezier(n,n,n,n):【三次貝塞爾】在cubiz-bezier函數中定義自己的值,0~1。

      

                                                   DEMO =>

    transition-delay:指定開始時間。默認0。
      逗號分隔多個屬性的延遲時間。
      -moz-transition: color 0.3s ease-out 2s;

 

整理自:W3schoolW3cplus


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM