這篇文章將介紹 CodePen 上幾款熱門動畫的製作過程。 這些動畫全都使用本節其他文章所討論的實用技巧。
如要瞭解理論背後的理論,請參閱「為什麼有些動畫速度較慢?」一節。 這些建議,以及有關實用提示的動畫指南。
精靈載入動畫
這個載入動畫完全是用 CSS 製作而成。 圖片和所有動畫均使用 CSS 和 HTML 製作 不含圖片或 JavaScript。 如要瞭解應用程式的建立方式和效能,請使用 Chrome 開發人員工具。
使用 Chrome 開發人員工具檢查動畫
播放動畫時,在 Chrome 開發人員工具中開啟「效能」分頁,並錄製幾秒鐘的動畫。 您應該在「Summary」中看到瀏覽器執行這段動畫時,並未執行任何「版面配置」或「繪製」作業。
如果要知道在不造成版面配置和繪製的情況下達成此動畫的方式, 檢查 Chrome 開發人員工具中的任何移動元素。 您可以使用動畫面板找出各種動畫元素 按一下任何元素,即可在 DOM 中反白顯示。
例如選取三角形 看看該方塊如何在直播過程中 進行轉換 ,然後回到起始位置。
確認已選取元素後,就會查看「樣式」面板。 您可以在這裡看到用來繪製三角形形狀的 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 開發人員工具檢查圓圈,看看動畫如何。
具有 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: 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 3D360
這個動畫似乎非常複雜 然而,它所使用的技巧與先前範例已經介紹過。 複雜原因在於為大量元素建立動畫。
開啟 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
元素中使用巢狀結構
使用 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。 並順暢運作
結論
在這些範例中,您可以看到使用高效能方法將一些屬性動畫化,如何製作一些非常酷炫的動畫。 根據預設,使用動畫指南中提及的高效能方法 ,您就能投入時間產出想要的效果,更不用擔心拖慢網頁速度。