在這篇文章中，您將瞭解 CodePen 如何製作部分熱門動畫。這些動畫都使用本節其他文章中討論的效能技巧。
如要瞭解這些最佳化建議背後的原理，請參閱「為什麼有些動畫速度緩慢？」一文，並參閱動畫指南，瞭解實用提示。
精靈載入動畫
這個載入動畫完全是使用 CSS 製作而成。圖片和所有動畫均使用 CSS 和 HTML 製作，不含任何圖片或 JavaScript。如要瞭解應用程式的建立方式和效能，請使用 Chrome 開發人員工具。
使用 Chrome 開發人員工具檢查動畫
動畫執行時，請在 Chrome 開發人員工具中開啟「Performance」分頁，並記錄幾秒的動畫。您應該在「Summary」中看到瀏覽器執行這段動畫時，並未執行任何「版面配置」或「繪製」作業。
如要瞭解如何在不造成版面配置和繪製的情況下完成這項動畫，請在 Chrome 開發人員工具中檢查任何移動元素。您可以使用動畫面板找出各種動畫元素，點選任何元素即可在 DOM 中加以醒目顯示。
舉例來說，選取三角形，然後觀察元素的方塊在飛行過程中如何轉動，然後返回起始位置。
選取元素後，請查看「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 開發人員工具中檢查圓圈，瞭解這項動畫的運作方式。<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」面板，查看哪些屬性正在顯示動畫。接著，您會看到所用動畫和動畫屬性的視覺化效果。
白色圓圈本身是使用 ::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 球體
這段動畫似乎非常複雜，它使用了先前範例看過的技術。複雜原因在於為大量元素建立動畫。
開啟 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);
}
}
您可以在 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 開發人員工具，並在動畫執行期間記錄效能。初始載入後，動畫不會觸發版面配置或繪製，且能順暢運作。
結論
從這些範例中，您可以瞭解如何使用效能良好的方法為幾個屬性製作動畫，進而創造出非常酷炫的動畫。您可以預設為動畫指南中所述的效能方法，這樣一來，您就能專心製作所需效果，不必擔心網頁會變慢。