css3 動畫筆記

作者:blue(又名一書and一世界) 我的github
**用途: **當作字典來查

some websites to learn css3Animate

transition

  • grammar: tansition: property duration timing-function delay;
  • detail
    • transition-property：要過渡的css屬性
    • transition-duration：要過渡持續多少秒或者毫秒
    • transition-timing-function：速度效果的速度曲線
    • transition-delay：延遲多少秒執行過渡
  • notice
    • 默認值：transition:all 0 ease 0
    • 如果transition-duration屬性沒有被設置，則默認為0，即不會產生過渡效果
    • tanstion-timing-function: linear/勻速/ | ease-in /加速/ | ease-out /減速/ | ease /逐漸放慢/ | cubic-bezier /函數，自定義速度模式，可以使用 工具網站 這個網站制作/
  • compatibility
    • 目前，各大瀏覽器（包括IE 10）都已經支持無前綴的transition，所以transition已經可以很安全地不加瀏覽器前綴。
    • 不是所有的CSS屬性都支持transition，完整的列表查看這里，以及具體的效果。
    • transition需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。比如，height從0px變化到100px，transition可以算出中間狀態。但是，transition沒法算出0px到auto的中間狀態，也就是說，如果開始或結束的設置是height: auto，那么就不會產生動畫效果。類似的情況還有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。
  • advantage : 簡單易用
  • disavantage
    • transition需要事件觸發，所以沒法在網頁加載時自動發生。
    • transition是一次性的，不能重復發生，除非一再觸發。
    • transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。
    • 一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

animation

  • grammar: name duration timing-function delay iteration-count direction
  • detail
    • @keyframes：規定動畫
    • animation-name：綁定選擇器的keyframe名稱
    • animation-duration：動畫的持續時間，以秒或者毫秒計
    • animation-timing-function：動畫的速度曲線
    • animation-delay：延遲多少秒執行動畫
    • animation-iteration-count：動畫播放次數
    • animation-diretion：是否應該輪流反向播放動畫
    • animation-play-state(通常用在js控制是否播放,object.style.animationPlayState)：（paused[停止] | running[播放]）規定動畫正在播放還是暫停
    • animation-fill-mode(通常用在js控制動畫效果是否可見,object.style.animationFillMode)：（none[不改變默認行為] | forwards[當動畫完成后，保持最后一個屬性值] | backwards[在animation-delay 所制定的一段時間內，在動畫顯示之前，應該開始屬性值] | both[向前和向后填充模式都被應用]）規定動畫在播放之前或之后，其動畫效果是否可見。
  • compatibility
    • Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。Chrome 和 Safari 需要前綴 -webkit-
    • Internet Explorer 9，以及更早的版本，不支持 @keyframe 規則或 animation 屬性
  • notice
    • 默認值：animation:none 0 ease 0 1 normal
    • 盡量少在@keyframe里使用除了transform,opacity,filter以外的元素，因為會觸發瀏覽器的重繪(repaint)詳情
    • @keyframe
      • 定義：以百分比來規定改變發生的時間，或者通過關鍵詞"from" 和 "to"，等價于0%和100%，0%是動畫的開始時間，100%是結束時間
      • grammar:@keyframes animationname{ keyframes-selector { css-styles;} }
      • detail
        • animationname：（必需）定義動畫名稱
        • keyframes-selector：（必需）動畫時長的百分比，合法的值：0%-100%（可以使用 from[0%] 和 to[100%]）
        • css-styles：（必需）一個或多個合法的css樣式屬性
      • example
          @keyframes mymove
          {
            0%   {top:0px;}
            25%  {top:200px;}
            50%  {top:100px;}
            75%  {top:200px;}
            100% {top:0px;}
          }
          @-moz-keyframes mymove /* Firefox */
          {
            0%   {top:0px;}
            25%  {top:200px;}
            50%  {top:100px;}
            75%  {top:200px;}
            100% {top:0px;}
          }

          @-webkit-keyframes mymove /* Safari 和 Chrome */
          {
            0%   {top:0px;}
            25%  {top:200px;}
            50%  {top:100px;}
            75%  {top:200px;}
            100% {top:0px;}
          }

          @-o-keyframes mymove /* Opera */
          {
            0%   {top:0px;}
            25%  {top:200px;}
            50%  {top:100px;}
            75%  {top:200px;}
            100% {top:0px;}
          }
  • 如果animation-duration屬性沒有設置，則時長為0，即動畫不會被播放
  • animation-iteration-count默認值為1，可設置為infinite（無限次播放）
  • animation-direction:normal /正常播放/ | alternate /輪流反向播放/
  • advantage ：解決了transition過渡效果不能循環播放的弊端
  • disvantage：目前，IE 10和Firefox（>= 16）支持沒有前綴的animation，而chrome不支持，所以必須使用webkit前綴。代碼必須寫成下面這樣。
      div:hover {
        -webkit-animation: 1s rainbow;
        animation: 1s rainbow;  
      }

      @-webkit-keyframes rainbow {
        0% { background: #c00; }
        50% { background: orange; }
        100% { background: yellowgreen; }
      }

      @keyframes rainbow {
        0% { background: #c00; }
        50% { background: orange; }
        100% { background: yellowgreen; }
      }

transform

  • grammar:transform:none | transform-functions
  • detail:none and transform-functions
    • none：不定義轉換
    • matrix(n,n,n,n,n,n)：定義2D轉換，使用六個值的矩陣
    • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定義3D轉換，使用16個值的4X4矩陣
    • translate(x,y)：定義2D轉換（參數：x軸移動量，y軸移動量。+即向右移動，-即向左移動。單獨一個量時表示x軸移動量與y軸移動量相等）
    • translate3d(x,y,z)：定義3D轉換（參數基于translate(x,y)擴展）
    • translateX(x)：定義轉換，只用于X軸的值
    • translateY(y)：定義轉換，只用于Y軸的值
    • translateZ(z)：定義轉換，只用于Z軸的值
    • scale(x,y)：定義2D縮放轉換（參數x,y是倍數）
    • scale(x,y,z)：定義3D縮放轉換（參數基于scale(x,y)擴展）
    • scaleX(x)：設置X軸的值來定義縮放轉換
    • scaleY(y)：設置Y軸的值來定義縮放轉換
    • scaleZ(z)：設置Z軸的值來定義縮放轉換
    • rotate(angle)：定義2D旋轉。在參數中規定角度（正是順時針，負是逆時針）
    • rotate3d(x,y,z,angle)：定義3D旋轉
    • rotateX(angle)：定義沿著X軸的3D旋轉
    • rotateY(angle)：定義沿著Y軸的3D旋轉
    • rotateZ(angle)：定義沿著Z軸的3D旋轉
    • skew(x-angle,y-angle)：定義沿著X和Y軸的2D傾斜轉換
    • skew(angle)：定義沿著X軸的2D傾斜轉換
    • skew(angle)：定義沿著Y軸的2D傾斜轉換
    • perspective(n)：為3D轉換元素定義透視視圖
  • compatibility
    • Internet Explorer 10、Firefox、Opera 支持 transform 屬性
    • Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉換）
    • Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）
    • Opera 只支持 2D 轉換
    • Internet Explorer 10 和 Firefox 支持 3D 轉換
    • Chrome 和 Safari 需要前綴 -webkit-
    • Opera 仍然不支持 3D 轉換（它只支持 2D 轉換）
  • notice
    • transform-origin可以定義改變被轉換元素的位置
      • grammar：transform-origin:x-axis,y-axis,z-zxis
      • 默認值：transform-origin:50% 50% 0
      • detail
        • x-axis | y-axis：定義視圖被置于X軸的何處。可能的值：left | center | right | length | %
        • z-axis：定義視圖被置于Z軸的何處。可能的值：length
      • compatibility
        • Internet Explorer 10、Firefox、Opera 支持 transform-origin 屬性
        • Internet Explorer 9 支持替代的 -ms-transform-origin 屬性（僅適用于 2D 轉換）
        • Safari 和 Chrome 支持替代的 -webkit-transform-origin 屬性（3D 和 2D 轉換）
        • Opera 只支持 2D 轉換
    • transform-style規定如何在3D空間中呈現被嵌套的元素
      • grammar:transform-style:flat | preserve-3d
      • tranform-style默認值：transform-style:flat
      • compatibility
        • Firefox 支持 transform-style 屬性
        • Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 屬性
    • perspective定義3D元素距視圖的距離，以像素計。
      • grammar:perspective number | none
      • perspective默認值：perspective:none
      • detail
        • 當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身
        • perspective 屬性只影響 3D 轉換元素
        • 通常和perspective-origin屬性配合改變3D元素的底部位置
      • compatibility
        • 目前瀏覽器都不支持 perspective 屬性
        • Chrome 和 Safari 支持替代的 -webkit-perspective 屬性
    • perspective-origin定義 3D 元素所基于的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置
      • grammar:perspective-origin:x-axis,y-axis
      • perspective-origin默認值：perspective-origin:50% 50%
      • detail
        • 當為元素定義 perspective-origin 屬性時，其子元素會獲得透視效果，而不是元素本身
        • 該屬性必須與 perspective 屬性一同使用，而且只影響 3D 轉換元素
      • compatibility
        • 目前瀏覽器都不支持 perspective-origin 屬性
        • Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 屬性
    • backface-visibility定義當元素不面向屏幕時是否可見
      • grammar:backface-visibility: visible | hidden
      • backface-visibility默認值：backface-visibility:visible
      • detail
        • 如果在旋轉元素不希望看到其背面時，該屬性很有用
      • compatility
        • 只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 屬性
        • Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 屬性

下一篇文章預告： chrome dev tools 簡介

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 看了很多視頻、文章，最后卻通通忘記了，別人的知識依舊是別人的，自己卻什么都沒獲得。此系列文章旨在加深自己的印象，因...
    DCbryant閱讀 1,895評論 0贊 4
  • 1、屬性選擇器：id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,656評論 0贊 7
  • 2D、3D變形動畫 transform：2D變形：復合屬性 通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉...
    Zd_silent閱讀 416評論 0贊 0
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,335評論 0贊 11
  • Kotlin 可以說讓安卓開發插上了翅膀，可以使用諸多優秀的函數式語法(java8才帶) 簡化了安卓開發的代碼量。...
    上重樓閱讀 1,137評論 0贊 0