高效能 CSS 動畫示例

這篇文章將介紹 CodePen 上幾款熱門動畫的製作過程。 這些動畫全都使用本節其他文章所討論的實用技巧。

如要瞭解理論背後的理論,請參閱「為什麼有些動畫速度較慢?」一節。 這些建議,以及有關實用提示的動畫指南

精靈載入動畫

CodePen 上的檢視精靈載入動畫

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

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

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

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

如果要知道在不造成版面配置和繪製的情況下達成此動畫的方式, 檢查 Chrome 開發人員工具中的任何移動元素。 您可以使用動畫面板找出各種動畫元素 按一下任何元素,即可在 DOM 中反白顯示。

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

例如選取三角形 看看該方塊如何在直播過程中 進行轉換 ,然後回到起始位置。

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

確認已選取元素後,就會查看「樣式」面板。 您可以在這裡看到用來繪製三角形形狀的 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 開發人員工具中開啟「效能」分頁,並錄製幾秒鐘的動畫。 停止錄製 您應會看到「Recalculate Style」(重新計算樣式) 沒有任何項目。 現在您已經知道這個動畫不會重新計算樣式 包括版面配置和繪製作業

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

用 Firefox 開發人員工具檢查圓圈,看看動畫如何。 具有 pulsating-circle 類別的 <div> 會標記圓形的位置。 但本身並不會繪製圓形

.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 3D360

在 CodePen 上查看 Pure CSS 3D36

這個動畫似乎非常複雜 然而,它所使用的技巧與先前範例已經介紹過。 複雜原因在於為大量元素建立動畫。

開啟 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 元素中使用巢狀結構 使用 Transform 技術來縮放及翻譯動畫 這會造成閃爍效果。

圓點會隨著球面和脈衝而旋轉。
.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 開發人員工具,並在執行時記錄效能。 初始載入後,動畫就不會觸發 Layout 或 Paint。 並順暢運作

結論

在這些範例中,您可以看到使用高效能方法將一些屬性動畫化,如何製作一些非常酷炫的動畫。 根據預設,使用動畫指南中提及的高效能方法 ,您就能投入時間產出想要的效果,更不用擔心拖慢網頁速度。