重學前端之CSS(四)CSS過渡與動畫

這一篇文章的主要介紹的是CSS過渡和動畫的相關屬性。

CSS過渡

1、定義
transition屬性: 能夠爲一個元素在不一樣狀態之間切換的時候定義不一樣的過渡效果。是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一個簡寫屬性。IE10支持，須要使用前綴-ms-。

2、transition屬性說明
  1) transition-property: 指定CSS屬性的name,transition效果(要進行過渡的CSS屬性)
  2) transition-duration: transition效果須要指定多少秒或毫秒才能完成
  3) transition-timing-function: 指定transition效果的轉速曲線,也就是過渡時以什麼速度進行過渡
    其值爲:
      a.linear: 勻速
      b.ease: 慢 -- 快 -- 慢
      c.ease-in: 以慢開始
      d.ease-out: 以慢結束
      e.ease-in-out: 以慢速開始和結束
      f.cubic-bezier(n,n,n)：在cubic-bezier函數中定義本身的值,可能的值是0至1之間的數值 (貝塞爾曲線調試網站: https://cubic-bezier.com )
  4) transition-delay: 定義transition效果開始的時候,也就是延遲多少秒後開始動畫

3、語法
  transition的語法: transition: property duration timing-function delay; 默認值爲 transition: all 0 ease 0。
例:

.btn {
    width: 300px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    margin: auto;
    background-color: yellowgreen;
    transition: all .5s ease 0s;
}

.btn:hover {
    background-color: lightblue;
    border-radius: 50px;
}

參考內容:
  菜鳥教程--CSS3transition屬性
  CSS3transition-timing-function屬性

CSS動畫

1、animation定義
  animation: 用來指定一組或多組動畫，每組之間用逗號相隔。它是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 屬性的一個簡寫屬性形式。IE10支持。

2、animation語法
  animation簡寫語法: animation: name duration timing-function delay iteration-count direction。默認值爲 animation: none 0 ease 0 1 normal。

3、animation屬性說明
  1) animation-name: 綁定到選擇器的keyframe名稱
  2) animation-duration: 完成動畫所須要花費的時間,以秒或毫秒計
  3) animation-timing-function: 動畫的速度曲線，和transition-timing-function的取值一致
  4) animation-delay: 在動畫開始以前的延遲
  5) animation-iteration-count: 規定動畫應該播放的次數 (infinite)
  6) animation-direction: 規定是否應該輪流反向播放動畫 (normal: 默認值,正常播放; alternate:反向播放)

4、@keyframes規則的定義
  @keyframes規則: 經過在動畫序列中定義關鍵幀（或waypoints）的樣式來控制CSS動畫序列中的中間步驟。這比轉換更能控制動畫序列的中間步驟。幀數能夠爲百分比、from(等效於0%)、to(等效於100%)。IE10支持。

5、完整動畫的使用案例

@keyframes show {
    20% {
        opacity: .3;
    }

    40% {
        border-radius: 50px;
    }
    60% {
        background-color: yellow;
    }
}

/* transition 和 animation能夠組合使用 */
@keyframes move {
    0% {
        left: -300px;
        transition: left ease;
    }
    50% {
        left: 150px;
        transition: left linear;
    }
    100% {
        left: 0px;
        transition: left ease-out;
    }
}

.btn1 {
    animation: show 1s linear 1s infinite;
}

  注: 重複定義的關鍵幀中，若是屬性不一樣則會都生效，若是屬性相同的話，那麼以最後一次定義的屬性爲準。在關鍵幀中出現的!important關鍵詞的屬性將會被忽略。
參考內容:
  W3school---CSS3 animation 屬性
  MDN--@keyframes

CSS動畫優化

• 只容許改變transform、opacity，其它屬性不要動，避免從新計算佈局（reflow）
• 對動畫元素應用transform: translate3d(0, 0, 0)、will-change: transform等，開啓硬件加速
• 動畫元素儘可能用fixed、absolute定位方式，避免reflow
• 對動畫元素應用高一點的z-index，減小複合層數量

來源: css動畫與gpu
推薦閱讀:
  CSS3 動畫卡頓性能優化的完美解決方案
  用CSS開啓硬件加速來提升網站性能（轉）

以上內容若有不對,但願你們指出,謝謝。