高效能 CSS 動畫示例

Rachel Andrew

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

如要瞭解這些最佳化建議背後的原理，請參閱「為什麼有些動畫速度緩慢？」一文，並參閱動畫指南，瞭解實用提示。

精靈載入動畫

在 CodePen 上查看精靈載入動畫

這個載入動畫完全是使用 CSS 製作而成。圖片和所有動畫均使用 CSS 和 HTML 製作，不含任何圖片或 JavaScript。如要瞭解應用程式的建立方式和效能，請使用 Chrome 開發人員工具。

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

動畫執行時，請在 Chrome 開發人員工具中開啟「Performance」分頁，並記錄幾秒的動畫。您應該在「Summary」中看到瀏覽器執行這段動畫時，並未執行任何「版面配置」或「繪製」作業。

分析精靈動畫後的摘要。

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

在 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 形狀。

動畫是透過下列 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 開發人員工具中檢查圓圈，瞭解這項動畫的運作方式。<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: scale 和 opacity。

.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 類別的其中一個元素。 這個球體由一組旋轉平面和輻條組成。

飛機似乎在旋轉。

注意： Chrome 開發人員工具中的 DOM 搜尋工具能讓你輕鬆找到想檢查的元素。

這些平面和輻條位於包裝函式 <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);
  }
}

您可以在 plane 和 spoke 元素中找到這些點，並使用轉換動畫來縮放及轉譯圓點。這會造成閃爍效果。

圓點會隨著球體旋轉並閃爍。

.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 開發人員工具，並在動畫執行期間記錄效能。初始載入後，動畫不會觸發版面配置或繪製，且能順暢運作。

結論

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