使用 CSS 動畫和過渡讓您的網頁栩栩如生

已發表: 2017-10-09

網站設計不斷發展。從響應式設計、漂亮的排版、完美的顏色編碼方案、插圖，網站創建者每天都在想出新的想法和設計。

由於互聯網上提供瞭如此高質量的內容，現在用戶對用戶界面有很高的期望。隨著網站界面的不斷發展，其背後的技術也在不斷發展。負責增強網站界面的一個主要組件是CSS 。

CSS 或級聯樣式表負責通過定義樣式、佈局和設計來使網站更具交互性。 CSS 的最新標準 CSS3 引入了動畫和轉換的概念，通過增加用戶界面的深度來增強用戶體驗。使用 CSS 動畫和過渡，您可以講故事、創建華麗的效果並使用戶與您的網站的交互更加有效和有意義。

動畫只是通過一個接一個地顯示一系列對象（如圖片）創建的運動模擬。另一方面，轉換基本上是對像從一種狀態變為另一種狀態的過程。但是，當我們談論網絡動畫時，基本上有三種類型——CSS 動畫或關鍵幀動畫、 CSS 過渡和JavaScript 動畫。

CSS 動畫

要在 CSS 中創建動畫，我們需要在一段時間內更改元素（例如圖像或文本）的 CSS 屬性。我們可以根據需要多次更改元素的屬性，也可以設置動畫的持續時間。

指定@keyframes

CSS 動畫是用關鍵幀定義的。這些關鍵幀是動畫的中間點。所有 CSS 動畫都在 @keyframes 規則下指定。這些關鍵幀指定元素在特定時刻發生的情況，即，

什麼屬性正在改變
當元素動畫時
元素如何動畫

您可以將自己的關鍵幀定義為：

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

這裡的“to”和“from”指定動畫的開始和結束。我們還可以為開始和結束之間的中間時刻指定動畫，如下所示：

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

這裡 0% 代表動畫的開始，100% 代表動畫的結束，50% 表示開始和結束之間的變化。但是，我們如何告訴瀏覽器動畫應該發生多少時間？我們在某些動畫屬性的幫助下做到這一點。這些動畫屬性與要製作動畫的元素相關聯。例如：

element_name
{
animation_property: value;
style_property: value;
}

這裡 element 可以是任何 HTML 標籤，例如 div、span、img、p 等， style_property是任何 CSS 樣式屬性，例如 background_color、width、height 等。現在讓我們詳細了解一些動畫屬性。

@keyframes ：關鍵幀用於指定動畫代碼，如上所述。
animation-name ：@keyframes 指定的名稱是動畫的名稱。此名稱用於引用要設置動畫的元素的關鍵幀。
animation-duration ：用於指定動畫的持續時間，以秒或毫秒為單位。例如，如果我們將其設置為 5 秒，那麼動畫將只運行 5 秒。如果我們不設置這個屬性，那麼動畫將根本不會運行，因為它的默認值為 0。
animation-delay ：我們可以通過指定動畫延遲時間來延遲動畫的開始。例如，如果您想在頁面加載到瀏覽器後 5 秒開始動畫，只需將 animation-delay 設置為 5s。
animation-direction ：我們可以通過這個屬性告訴瀏覽器動畫是反向移動還是交替循環。例如，如果您希望動畫從頭到尾運行，則將動畫持續時間的值設置為“正常”。如果您希望它從頭到尾運行，則只需將值設置為“反向”。
animation-fill-mode ：我們可以在動畫不使用此模式播放時指定元素的樣式，即當動畫延遲或完成時，元素的樣式應該是什麼。
animation-iteration-count ：動畫可以播放的次數由該屬性表示。例如，如果您想播放動畫一次將其設置為 1，或者如果您希望動畫永遠播放，只需將其設置為“無限”。
animation-timing-function ：該屬性用於指定動畫的速度曲線，如線性、加速或減速。
Animation ：它是設置所有動畫屬性的簡寫屬性。

例如，您可以使用以下代碼片段為彈跳對象設置動畫。注意這裡是如何使用動畫的速記符號的。

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

過渡

基於某些計時函數（也稱為緩動函數），CSS 過渡應用於元素的屬性一段時間。計時功能是指將元素的屬性從一種狀態更改為另一種狀態的功能，例如線性進展、加速或減速。您可能已經註意到圖像在懸停時滑動或轉換為另一張圖像，或者在鼠標單擊時播放聲音。這些都是可以使網站具有交互性的過渡效果。

緩動函數對於創建過渡很重要。它們指定屬性將如何更改。它們還可以改變屬性值從過渡的起點到終點的變化率。您可以通過以下方式應用轉換：

element 
{
style_property: value;
transition_property: value;
}

這裡 element 指定要轉換的 HTML 元素，如 div、H1、img 等。style_property 是應用於該元素的 CSS 樣式。現在讓我們看一些過渡屬性：

transition-property ：過渡效果將始終應用於元素的 CSS 屬性，例如其寬度、高度、顏色或形狀。此屬性的值指定元素的 CSS 屬性。只要此屬性發生變化，例如鼠標懸停或單擊時，過渡效果就會開始。
transition-timing-function ：這是要應用於元素的緩動函數。該屬性用於指定緩入、緩出、線性等過渡的速度曲線。
transition-duration ：它就像動畫持續時間屬性。它用於指定過渡效果的持續時間，以秒或毫秒為單位。例如，如果我們將其設置為 5 秒，則轉換效果將在 5 秒內完成。如果我們不設置此屬性，則根本不會有過渡，因為它的默認值為 0。
transition-delay ：通過這個屬性，我們可以指定延遲過渡效果的持續時間。例如，如果要在鼠標懸停 5 秒後啟動效果，只需將 transition-delay 設置為 5s。
transition ：它是將上述所有過渡屬性設置在一起的簡寫屬性。

例如，以下代碼將在鼠標懸停時更改 div 元素的寬度。請參閱此處應用的轉換簡寫屬性。

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

動畫與過渡

Animations vs. Transitions

動畫和過渡之間的相似之處

過渡和動畫都用於可視化元素屬性的變化。
我們可以指定過渡和動畫應該發生多長時間的持續時間。
我們有一些計時函數來改變從一個值到另一個值的轉換和動畫的速率。

動畫和過渡之間的差異

CSS 過渡是反應式的。它們需要由用戶觸發。另一方面，動畫在頁面加載到瀏覽器時運行。它們不需要被觸發。
轉換運行一次然後停止。然後，我們必須在動畫可以循環時一次又一次地觸發它們。他們可以在自己的站點開始，然後重新開始。
瀏覽器自己負責轉換。我們只需要指定轉換的開始和結束。我們可以設置過渡效果，但不能改變過渡的變化率。例如，如果圖像在鼠標懸停時滑動，當我們將鼠標懸停在它上面時，我們只會看到它淡入或淡出。
另一方面，動畫提供了在開始和結束之間更改屬性的靈活性。這在關鍵幀的幫助下發生。例如，我們可以將圖像的顏色在前 5 秒設置為紅色，然後在接下來的 5 秒設置為藍色，然後在接下來的 5 秒設置為綠色，在動畫的最後 5 秒設置為黃色。因此，我們可以控制動畫。

供應商前綴

並非所有瀏覽器都支持所有 CSS3 功能。因此，我們在這些 CSS 屬性中為特定瀏覽器使用前綴，例如 -webkit- (Safari)、-moz- (Firefox) 或 -o- (Opera)。這允許瀏覽器標記添加對該 CSS3 功能的支持。這些前綴稱為供應商前綴或CSS 瀏覽器前綴。因此，我們還需要將供應商前綴與動畫和過渡屬性一起放置。例如，考慮下面的代碼，看看如何使用 Safari 的供應商前綴：

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

小費！ 您可以使用諸如-prefix-free之類的庫來避免這種麻煩。它是一個 JavaScript 庫，可以將當前瀏覽器的前綴添加到任何 CSS 代碼中。查看網絡上提供的許多此類庫。

結論

網站開發人員可以應用動畫和轉換來吸引用戶訪問您的網站。您可以使用它們來增強表單、通知、背景圖形、圖像、圖表、塗鴉、號召性用語按鈕等等。只要發揮你的想像力，你就能找到一種讓用戶驚嘆的方法。請記住，即使您的網站發生很小的變化，也可以使它看起來更好，並增加其價值。那麼，您在您的網站上使用過動畫嗎？分享您對使用動畫和過渡的想法。