如何使用 CSS 製作動畫

已發表: 2014-12-27

我們已經非常習慣在網站上看到動畫並享受它們為網頁設計帶來的活力和多樣性。它們引人注目，是為網站添加一些視覺趣味的好方法，並且通常會使用戶的體驗更加令人興奮。

雖然傳統上使用 GIF、SVG、WebGL 和背景視頻來實現，但也可以使用 CSS 高效地創建動畫。瀏覽器對 CSS 動畫的支持得到了極大的改進並且變得非常流行——兼容的瀏覽器包括 Firefox 5+、IE 10+、Chrome、Safari 4+ 和 Opera 12+。

今天，我將通過一步一步的演示帶您了解創建 CSS 動畫的基礎知識。在那之後留下來看看五個動畫示例。您將能夠使用所有這些想法為您自己的項目創建動畫！

CSS動畫基礎

顯然，在我們深入研究五種有趣的 CSS 動畫之前，了解動畫工作原理的基礎知識很重要。
例如，關鍵幀是 CSS 動畫的關鍵組件。如果您使用過 Adobe Flash 或有視頻編輯經驗，您可能熟悉該術語。在這種情況下，關鍵幀一詞正是您所想的：它是一種指定特定動作的方式。

您之前可能在 CSS 樣式表中遇到過@keyframes 。在這個@keyframes中，您可以定義動畫的樣式和階段。這是淡出效果的一個很好的例子：

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

我們剛剛創建的淡出關鍵幀的基礎包括：

一個描述性的名稱：在這種情況下，fadeOut。
動畫的階段：From 設置為 0%，To 設置為 100%。
將在每個階段應用的 CSS 樣式。

默認情況下， From為 0%， To為 100%，因為在此示例中未指定其他階段。

具有動畫子屬性的特定操作

我們需要做更多的事情來設置樣式——我們需要使用子屬性來設置animation屬性的樣式。如果關鍵幀定義了動畫的外觀，那麼動畫子屬性定義了動畫的特定規則。這些讓您可以配置動畫序列應該如何進行的時間、持續時間和其他關鍵細節。

動畫屬性用於在 CSS 選擇器中調用@keyframes 。動畫可以而且通常會有多個子屬性。以下是子屬性的示例：

與動態圖形藝術家合作

沒有什麼能像動畫一樣讓您的設計栩栩如生。但是，如果您從未與動畫師或運動圖形藝術家合作過，那麼運動可能會感覺像是一個陌生的世界。如果你正在考慮 p...

Animation-name： @keyframes at-rule 的名稱，它描述了動畫的關鍵幀。前面示例中的名稱fadeOut是動畫名稱的示例。
Animation-duration：動畫完成一個完整週期所需的時間長度。
Animation-timing-function：動畫的時序，具體來說是動畫如何通過關鍵幀過渡。該功能具有建立加速度曲線的能力。示例是線性、緩動、緩入、緩出、緩入出或三次貝塞爾。
Animation-delay：元素加載到動畫開始之間的延遲。
Animation-iteration-count：動畫應該重複的次數。想讓動畫永遠持續下去嗎？您可以指定無限以無限期地重複動畫。
Animation-direction：動畫是否應該在每次運行時交替方向通過序列或重置到起點並重複自身。
Animation-fill-mode：動畫在執行之前和之後應用的值。
動畫播放狀態：使用此選項，您可以暫停和恢復動畫序列。例如none、forwards、backwards或both 。

將它們放在一起以獲得最佳瀏覽器支持

這裡發生了很多事情，術語可能有點混亂。但是我們現在知道，關鍵幀定義了動畫的外觀以及不同的動畫階段，並且動畫屬性使用子屬性來定義動畫選項，如延遲、方向、時間等。

您可能熟悉供應商或瀏覽器前綴——在處理動畫時這些是必需的。我們需要確保我們擁有最好的瀏覽器支持。以下是標準瀏覽器前綴：

Chrome 和 Safari： -webkit-
火狐： -moz-
Internet Explorer： -ms-

Internet Explorer 10 不需要轉換前綴，但所有轉換都需要前綴。 Opera 被覆蓋是因為它可以識別 WebKit 樣式。

過渡開始

-webkit-transition
-moz-transition
transition

變換開始：

-webkit-transform
-moz-transform
-ms-transform
transform

想嘗試不同類型的動畫嗎？在 Photoshop 中製作 GIF！就是這樣。

五個動畫在行動

現在我們已經介紹了基礎知識，讓我們創建一些代碼來使用！

動畫一：圓到方

讓我們詳細介紹第一個，這樣我們就可以確保我們理解到目前為止我們所涵蓋的所有概念。動畫將從一個圓圈開始，然後變成一個正方形。

首先創建一個 div 是測試動畫的好方法：

&amp;lt;div class=”animationOne”&amp;gt;
&amp;lt;/div&amp;gt;

現在讓我們設置我們的@keyframes 。這個動畫將有五個階段，因為正方形有四個邊，我們需要有一個 0% 的起點。使用前綴，如下所示，但對於本教程的其餘部分，我們將僅使用基礎知識保持簡單。

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

現在，讓我們創建一些樣式來確定每個階段的邊框半徑：

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

現在添加background-color屬性來幫助區分動畫的每個階段：

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

最後，讓我們將動畫應用到測試 div：

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

動畫屬性通常以簡寫形式編寫，因此代碼中的實際情況如下：

動畫名稱是circle-to-square 。
動畫持續時間為2s 。
動畫延遲為1s 。
動畫迭代計數是infinite的，所以它會無限期地進行。
並且動畫方向是alternate的。這意味著它將從頭到尾播放並回到開頭。

動畫二：旋轉

此動畫允許旋轉對象。

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

為了使我們的動畫項目分開，請記住為第二個示例創建另一個 div。我添加了背景顏色，因為我們將在本示例中將動畫添加到 div 本身。

此動畫的持續時間為 2 秒，延遲為 3 秒。 animation-iteration-count 是 5，所以這個項目在停止之前會做 5 次動畫。動畫每隔奇數時間 (1,3,5,...) 反向播放，偶數時間 (2,4,6,...) 以正常方向播放。

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

動畫三：展開和閃爍

這是一個很棒的按鈕動畫，因為與頁面上的其他元素相比，它更加引人注目和突出。這也可能是值得包含在:hover狀態中的東西。

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

要對此進行測試，我們需要以下起始 div：

.animationThree {
width: 200px;
height: 200px;
}

&amp;lt;div class=”animationThree&amp;gt;
&amp;lt;a class=&quot;btn pulse&quot; href=&quot;&quot;&amp;gt;Click me&amp;lt;/a&amp;gt;
&amp;lt;/div&amp;gt;

動畫四：文字幻燈片
讓我們為文本添加一些動畫。該項目使您的文本從左側滑入一次。

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

動畫五：淡入

你有什麼驚喜內容嗎？查看此淡入動畫，了解您希望稍後出現的內容。您在這裡有很多選擇：淡入可以是快的或慢的，發生一次或多次，等等。

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

&amp;lt;div class=”animationFive”&amp;gt;
&amp;lt;img src=&quot;..&quot; /&amp;gt;
&amp;lt;/div&amp;gt;

CSS3 動畫非常適合讓您的網站動起來！現在您已經掌握了創建動畫的基本概念，動畫的可能性是無窮無盡的。你會製作什麼動畫？