高效能 CSS 動畫示例

在這篇文章中,您將瞭解 CodePen 如何製作部分熱門動畫。這些動畫都使用本節其他文章中討論的效能技巧。

如要瞭解這些建議的理論,請參閱「為什麼有些動畫速度較慢?」一節;如要瞭解實用秘訣,請參閱動畫指南

精靈載入動畫

CodePen 上的檢視精靈載入動畫

這段載入動畫完全採用 CSS 建構而成。圖片和所有動畫都是使用 CSS 和 HTML 建立,不含圖片或 JavaScript。如要瞭解如何建立並評估成效,您可以使用 Chrome 開發人員工具。

使用 Chrome 開發人員工具檢查動畫

動畫執行時,請在 Chrome 開發人員工具中開啟「Performance」分頁,並記錄幾秒的動畫。您應該會在「摘要」中看到,瀏覽器在執行此動畫時不會執行任何版面配置或繪圖作業。

開發人員工具中的摘要
精靈動畫剖析後的摘要。

如要得知在不造成版面配置和繪製的情況下完成動畫效果,請在 Chrome 開發人員工具中檢查任何移動元素。您可以使用動畫面板找出各種動畫元素,點選任何元素即可在 DOM 中加以醒目顯示。

「Animations」面板顯示動畫的各個部分。
在 Chrome 開發人員工具動畫面板中查看及選取項目。

舉例來說,選取三角形,然後觀察元素的方塊在飛行過程中如何轉動,然後返回起始位置。

影片:說明如何在 Chrome 開發人員工具中追蹤三角形的路徑。

選取元素後,請查看「Styles」面板。您可以看到用來繪製三角形形狀的 CSS,以及所使用的動畫。

運作方式

三角形是使用 ::after 虛擬元素建立生成的內容,並使用邊框建立形狀。

.triangle {
    position: absolute;
    bottom: -62px;
    left: -10px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.triangle::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 28px 48px 28px;
    border-color: transparent transparent #89beb3 transparent;
}

動畫是透過下列 CSS 行加入:

animation: path_triangle 10s ease-in-out infinite;

在 Chrome 開發人員工具中,您可以向下捲動「樣式」面板,找到關鍵影格。您會發現,動畫是使用 transform 變更元素位置並旋轉元素而建立。transform 屬性是「動畫指南」中所述屬性之一,不會導致瀏覽器執行版面配置或繪圖作業 (這兩者是導致動畫速度緩慢的主要原因)。

@keyframes path_triangle {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-172px) translatex(10px) rotate(-10deg);
  }
  55% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  58% {
    transform: translateY(-172px) translatex(10px) rotate(-365deg);
  }
  63% {
    transform: rotate(-360deg);
  }
}

這部動畫的每個不同移動部分都使用類似的技術。結果是流暢運作的複雜動畫。

閃爍的圓形

在 CodePen 上查看 Pulsating Circle

這類動畫有時會用來吸引使用者注意網頁上的某些內容。如要瞭解動畫,您可以使用 Firefox 開發人員工具。

使用 Firefox 開發人員工具檢查動畫

動畫執行時,請在 Firefox 開發人員工具中開啟「Performance」(效能) 分頁,並記錄幾秒的動畫。停止錄製後,您應該會在瀑布圖中看到「Recalculate Style」沒有任何項目。您現在已瞭解這項動畫不會導致樣式重新計算,因此不會影響版面配置和繪製作業。

Firefox 刊登序列中動畫的詳細資料
Firefox 開發人員工具瀑布圖。

請在 Firefox 開發人員工具中檢查圓圈,瞭解這項動畫的運作方式。<div> 的類別為 pulsating-circle,用來標示圓形的位置,但不會自行繪製圓形。

.pulsating-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 30px;
    height: 30px;
}

系統會使用 ::before::after 虛擬元素來達成可見的圓形和動畫。

::before 元素會使用名為 pulse-ring 的動畫建立不透明的圓環,該動畫會為 transform: scaleopacity 製作動畫。

.pulsating-circle::before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

另一個查看哪些屬性正在進行動畫處理,是在 Firefox 開發人員工具中選取「Animations」面板。然後,您會看到用的動畫和動畫屬性的示意圖。

選取 ::before 虛擬元素後,即可查看哪些屬性正在製作動畫。

白色圓圈本身是使用 ::after 擬造元素建立及製作動畫。動畫 pulse-dot 會使用 transform: scale 在動畫播放期間放大及縮小圓點。

.pulsating-circle::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

這類動畫可用於應用程式的各個地方,但請注意,這些小幅觸控操作不會影響應用程式的整體效能。

純 CSS 3D 球體

在 CodePen 上查看純 CSS 3D 球體

這段動畫看起來相當複雜,但它採用了先前範例中使用的技巧。複雜度來自大量元素的動畫效果。

開啟 Chrome 開發人員工具,然後選取其中一個類別為 plane 的元素。這個球體是由一組旋轉飛機和輪輻所組成。

飛機似乎在旋轉。

這些平面和輻條位於包裝函式 <div> 中,而這個元素會使用 transform: rotate3d 旋轉。

.sphere-wrapper {
  transform-style: preserve-3d;
  width: 300px;
  height: 300px;
  position: relative;
  animation: rotate3d 10s linear infinite;
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

您可以在 planespoke 元素中找到這些點,並使用轉換動畫來縮放及轉譯圓點。這會產生脈動效果。

圓點會隨球形和脈衝轉動。
.spoke-15 .dot,
.spoke-21 .dot {
  animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}

@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}

建立這項動畫時,您必須掌握正確的時間點,才能創造轉動和閃爍效果。動畫本身相當簡單,且使用效能極佳的方法。

如要查看這項動畫的效能,請開啟 Chrome 開發人員工具,並在動畫執行期間記錄效能。初始載入後,動畫不會觸發版面配置或繪製,並順利執行。

結論

從這些範例中,您可以瞭解如何使用效能良好的方法為幾個屬性製作動畫,進而創造出非常酷炫的動畫。您可以預設為動畫指南中所述的效能方法,這樣一來,您就能專心製作所需效果,不必擔心網頁會變慢。