將 CSS 動畫添加到 WordPress

動畫對於您的網頁來說可能是一種引人入勝且視覺上有趣的功能。 但是，使用 Flash 或 JavaScript 構建動畫會佔用您網站的大量資源。

幸運的是，您可以改為使用級聯樣式表 (CSS) 將動畫添加到 WordPress 網站。 這種編碼語言使您能夠在您的網站上加入無限的動畫，但仍然相對容易上手且易於學習。

在本文中，我們將討論 CSS 動畫的工作原理以及如何在使用和不使用插件的情況下向您的網站添加 CSS 動畫屬性。 讓我們動起來吧！

CSS 動畫是如何工作的？ （以及為什麼要使用它們）

CSS3 使用戶有機會通過隨時間改變元素（例如，圖像或按鈕）的樣式來創建動畫。 您可以根據需要修改元素的任意數量的 CSS 屬性，次數不限。

與 Flash 或 Javascript 動畫不同，CSS 動畫避免了瀏覽器兼容性問題和復雜的編碼。 這使您能夠將注意力吸引到重要功能上，而不會造成性能下降等負面影響。

使用插件添加 CSS 動畫

如果您對自己的編碼技能沒有信心，我們可以為您提供保障。 您可以使用插件輕鬆創建 CSS 動畫。

第 1 步：安裝和激活 CSS 動畫插件

要開始使用，您需要安裝 CSS 動畫插件。 我們正在使用 Blocks Animation: CSS Animations for Gutenberg Blocks，這是一個專門為塊編輯器製作的相對較新的工具。

您可以通過導航到 WordPress 儀表板中的插件 > 添加新的來找到此插件。 找到它後，單擊立即安裝，然後單擊激活：

激活完成後，轉到要包含簡單動畫的帖子或頁面。

第 2 步：設計動畫

接下來，單擊要設置動畫的元素。 在側邊欄的Block選項卡中，查找標記為Animation的部分，該部分是我們在 Step 1 中激活插件時添加的。 在這裡，您將看到一個下拉菜單，其中列出了幾種不同的效果：

您可以使用任意數量的動畫選項來找到適合您內容的動畫選項。

第 3 步：自定義延遲和速度

Blocks Animation 插件還帶有定時功能來自定義動畫的延遲和速度：

這兩個設置中的第一個推遲了動畫的開始。 這可能有助於在頁面加載後將注意力吸引到您的元素上，或者使您能夠組合使用動畫，正如我們稍後將演示的那樣。 您可以將動畫延遲屬性設置為長達五秒。

使用速度下拉菜單，您可以使動畫變慢、變慢、變快或變快。 較慢的動畫可能對訪問者來說更加微妙且不那麼刺耳，而較快的動畫將更能吸引他們的注意力。

第 4 步：保存並預覽您的動畫

我們建議您將帖子或頁面保存為草稿，並在發布之前預覽您的動畫元素。 如果您在一個頁面上處理多個 CSS 動畫，請務必保存動畫名稱屬性。 雖然動畫可以證明非常有用，但它們也有可能分散注意力並使您的頁面感覺混亂。

預覽頁面並保持動畫相對簡單可以防止出現這些不良結果。 下面，您可以看到我們完成的 CSS 動畫示例，它將動畫圖像與我們在前面步驟中設置樣式的按鈕配對：

如果您發現您的動畫不適合您的其餘內容或具有您想要的效果，您可以簡單地返回塊編輯器並進行調整。 這就是使用 CSS 動畫插件的美妙之處——它既快速又簡單。

在沒有插件的情況下添加 CSS 動畫

如果您喜歡編輯主題文件，您可以在沒有插件的情況下手動創建自定義動畫。 這需要一些編碼知識，所以這個解決方案最好留給那些有開發經驗的人。

在開始之前，請務必備份您的網站。 使用子主題也是明智之舉，這樣您可以在需要時輕鬆恢復到主題的默認文件。

第 1 步：了解涉及的 CSS 屬性

在實際進行任何編輯之前，在創建 CSS 動畫時需要牢記八個重要屬性：

• @keyframes：指定將通過動畫應用到元素的樣式。
• 動畫名稱：創建一個名稱，您可以使用該名稱在代碼中的其他位置引用動畫。
• 動畫持續時間：定義動畫應該運行多長時間。
• 動畫延遲：說明頁面加載後動畫應該等待多長時間才能開始。
• animation-iteration-count：注意動畫應該運行多少次。
• animations-direction：說明動畫應該運行的方向。
• animation-timing-function：決定動畫的速度曲線。
• animation-fill-mode：指定動畫不播放時元素的樣式。
• 動畫：將關鍵幀綁定到元素的簡寫屬性。

要理解的這些屬性中最重要的是“關鍵幀”。 這個術語來自手繪動畫過程，其中主幀被稱為關鍵幀，而其他幀被繪製成引入或引出它。

在 CSS 動畫中，關鍵幀指定正在發生的事情和時間。 以這個為例：

 @keyframes 示例 {
 0% {背景顏色：紅色；}
 25% {背景色：黃色；}
 50% {背景色：藍色；}
 100% {背景色：綠色；}
 }

上面的關鍵幀表明，在動畫進行到 25% 時，指定元素的背景顏色將從紅色變為黃色。 百分比通常用於定義動畫的時間。 但是，from 和 to 可以分別用來代替 0% 和 100%。

第 2 步：創建animate.css文件

為了添加 CSS 動畫，您需要使用上面的屬性在首選的文本編輯器中創建一個文件。 它應該包括您要使用的任何動畫的關鍵幀。 然後您將它們綁定到特定的 CSS 類，以便您可以將它們應用於您網站上的元素。

這是一個例子。 在下面的代碼中，我們首先使用 transform 和 visibility 屬性創建一個 CSS 關鍵幀動畫，這將使我們能夠從屏幕右側滑入一個元素：

 @keyframes slideInRight {
從 {
-webkit-transform: translate3d(100%, 0, 0);
變換： translate3d(100%, 0, 0);
能見度：可見；
}
至 {
-webkit-transform: translate3d(0, 0, 0);
變換： translate3d(0, 0, 0);
}
}

然後我們必須將該關鍵幀綁定到一個 CSS 類。 在本例中，它被命名為 slideInRight。 這段代碼將直接放在文件中上面的關鍵幀之後：

 .slideInRight {
 -webkit 動畫名稱：slideInRight；
 動畫名稱：slideInRight；
 }

您可以重複此過程以創建任意數量的動畫。 然後，將文件另存為animate.css。 或者，您可以下載流行的 Animate.css 文件。 它包含數十種流行動畫的關鍵幀和 CSS 類，因此您不必編寫自己的複雜動畫。

第 3 步：將您的animate.css文件上傳到您的站點

完成animate.css文件後，您需要將其上傳到主題目錄。 為此，請使用文件傳輸協議 (FTP) 和 FTP 客戶端（例如 FileZilla）訪問您的站點。 您可以在您的主機帳戶中找到必要的憑據。

您需要輸入您的public_html目錄，導航到wp-content > 主題，然後找到您的活動主題（或子主題）的文件夾：

查找標有css的子目錄。 如果存在，請將您的animate.css文件（或 Animate.css 中的animate.mini.css文件）上傳到其中。 如果您還沒有此文件夾，您可以輕鬆地創建一個新的子目錄並相應地命名：

文件上傳成功後，不要馬上離開 FTP 客戶端。 您需要進行一些文件編輯才能在您的 WordPress 網站上訪問此樣式表。

第 4 步：通過functions.php調用 Animate 樣式表

接下來，在您的活動主題文件夾中，找到您的functions.php文件。 最後，添加這段代碼：

 add_action('wp_enqueue_scripts', 'wpb_animate_styles');
功能 wpb_animate_styles() {
 wp_enqueue_style('animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all');
}

請注意，如果您從 Animate.css 上傳了animate.min.css文件，則需要在最後一行使用 animate.min.css 而不是 animate.css。

這使您的主題能夠調用您剛剛上傳的樣式表，以便您可以將其中的類應用於您網站上的元素。 保存更改後，返回 WordPress 儀表板。

第 5 步：使用 CSS 類應用動畫

您現在可以將animate.css文件中的任何類應用於帖子和頁面中的元素。 如果您使用的是 Animate.css 文件，您可以參考 GitHub 上包含的所有內容的完整列表。

導航到包含您要製作動畫的元素的帖子或頁面。 在經典編輯器中，切換到文本編輯器。 如果您使用的是塊編輯器，請單擊塊工具欄中的三點圖標並選擇Edit as HTML ：

然後，將動畫類和動畫類添加到元素標籤中：

最後，預覽您的帖子或頁面。 您的動畫現在應該可以工作了：

您可以調整此過程以將任何動畫合併到animate.css文件中。

使用 WP Engine 讓您的網站看起來很棒

使用視覺上有趣的功能（例如動畫）可以吸引您網站的訪問者並打造更專業的在線形象。 在 WP Engine，我們為為 WordPress 開發人員提供最佳提示和技巧而感到自豪，因此您的網站總是看起來最好。

與我們一流的託管平台結合使用時，您將擁有打動用戶所需的所有工具。 看看我們今天的計劃！