CSS 動畫是一種強大的工具，可以為您的網站和應用程序增添生機和趣味。它可以用來創建各種效果，從簡單的過渡到復雜的動畫。

如果您剛開始接觸 CSS 動畫，那么有很多資源可以幫助您入門。一個很好的起點就是視頻教程。視頻教程可以提供逐步指導，幫助您了解如何使用 CSS 創建動畫。

使用視頻教程制作生動的互動

要使用視頻教程制作生動的互動，請遵循以下步驟：

• 找到一個好的視頻教程。有很多不同語言的視頻教程可供選擇。選擇一個涵蓋您感興趣的主題且教學清晰的教程。
• 觀看視頻教程。在觀看視頻教程時，請記筆記并提出問題。如果您遇到任何問題，可以暫停視頻并嘗試自己弄清楚，或者在視頻下方評論區提問。
• 練習所學內容。一旦您理解了 CSS 動畫的基礎知識，就可以開始練習所學內容。嘗試創建一些簡單的動畫，例如文本淡入淡出或元素移動。
• 深入研究。一旦您掌握了基礎知識，您就可以深入研究 CSS 動畫并學習一些更高級的技術。有很多資源可以幫助您了解 CSS 動畫的各個方面。

CSS 動畫的簡易演示

以下是一些使用 CSS 動畫創建的簡單交互演示：

此交互式演示展示了如何使用 CSS 動畫創建文本淡入淡出效果。

這是一個簡單的 CSS 代碼示例，它將創建一個文本淡入淡出的效果。您可以在自己的項目中使用此代碼，或將其用作學習 CSS 動畫的起點。

結論

CSS 動畫是一種強大的工具，可以用來創建各種生動的互動。觀看視頻教程是學習 CSS 動畫的基礎知識和更高級技術的絕佳方式。通過使用本指南中提供的步驟，您可以使用 CSS 動畫制作出令人驚嘆的交互體驗。

---

CSS動畫特效源碼分享（附在線演示）

本文將分享一系列精美的前端CSS動畫特效源碼，讓你能夠直接在線預覽和下載。 這些動畫包括：CSS飛行的荷包蛋，荷包蛋仿佛加速向右前方飛翔，周圍氣流飛速掠過；CSS奔跑的卷紙，動態展示卷紙的前后奔跑；奔跑的小人，速度和姿勢可調整；可愛的CSS小貓加載動畫，吸引年輕人的目光；3D效果的CSS-MacBook動畫；傍晚時分的愜意CSS風車動畫；以及工作場景的CSS動畫，一人一貓一電腦一沙發。 每個特效都有簡單模型展示，但實際效果請務必點擊在線預覽以獲取完整體驗。 所有這些特效都展示了CSS的強大潛力，為網頁設計增添生動與活力。 通過點擊主頁，你會發現更多源碼和互動特效，讓你的設計之路更加精彩。 歡迎探索并分享你的靈感！

CSS過渡transition

在網頁設計中，CSS過渡（transition）是一種關鍵的動畫技術，它能夠讓元素從一種樣式逐漸平滑地轉變為另一種樣式，從而提升用戶交互和視覺體驗。 通過CSS過渡，設計者可以創建出動態、生動的動畫效果，例如，當用戶將鼠標懸停在某個元素上時，背景顏色逐漸變化，直觀地展示元素狀態的變化。 實現CSS過渡非常簡單，只需要少量代碼。 例如，使用:hover偽類和transition屬性，可以創建一個背景顏色隨鼠標懸停變化的元素。 CSS過渡通過指定要改變的屬性及其變化時間來實現動畫效果。 下面是一個簡單的例子：定義一個名為的類，設置其寬度為100px，背景顏色為紅色，并配置transition屬性在寬度改變時持續2秒。 當鼠標懸停在元素上時，寬度更改為200px，此時會體驗到平滑過渡效果。 CSS過渡的語法簡潔，只需要調整transition時間和屬性即可實現不同動畫效果。 通過調整這些參數，設計者能夠創建出各種動態效果，增強頁面的交互性和視覺吸引力。 值得注意的是，CSS過渡主要實現單向動畫，即只能從一個狀態平滑過渡到另一個狀態。 若需實現循環動畫效果，則需結合使用CSS動畫。 學習和深入了解CSS過渡可以通過訪問更多相關教程和學習視頻，進一步掌握其應用技巧和最佳實踐，從而在網頁設計中發揮CSS過渡的最大潛力。

CSS交互動畫指南之transition

WEB動畫世界已經變成了一個龐大的工具和技術叢林，像GSAP和FramerMotion以及ReactSpring這樣的庫如雨后春筍般涌現，幫助WEB項目開發向DOM添加動作。

不過，最基本和最關鍵的部分是CSS中的transition。 它是大多數前端開發人員學習的第一個動畫工具，WEB的交互動畫大部分是由CSS來完成的。

前面介紹keyframes的使用《CSS交互動畫指南之keyframes》，在本文中，將深入了解并學習更多關于CSS的動畫之transition，文章涉及的代碼示例效果可以點擊查看動畫效果。

基礎知識

創建動畫所需的主要角色是一些會發生變化的CSS屬性，下面是一個鼠標懸停時移動的按鈕示例，沒有動畫：

{width:80px;height:80px;border-radius:50%;border:none;margin:15px;background-color:#6a5acd;place-content:center;color:white;text-align:center;}:hover{transform:translateX(40px);}

當鼠標懸停在按鈕上時，這個片段使用:hover偽類來指定一個額外的CSS聲明，類似于JavaScript中的onMouseEnter事件。

為了向右移動元素，使用transform:translateY(40px)，雖然可以為此使用margin-left，但transform:translate是一個更佳的方式。

從上面的效果來看，按鈕的移動很生硬，下面就為按鈕增加transition屬性：

{transition:transform250ms;}

transition屬性值可以有多個值，但有兩個是必需的：

動畫屬性的名稱

動畫的持續時間

如果動畫是為多個屬性設置的，用逗號分隔的列表作為transition屬性值：

-2{transition:transform250ms,opacity400ms;}-2:hover{transform:scale(1.2);opacity:0;}

transition有一個特殊的值：all，即為任何CSS屬性的變化增加動畫效果。

動畫效果

當告訴一個元素從一個位置轉換到另一個位置時，瀏覽器需要計算出每個中間幀應該過渡。

例如：假設從左到右移動一個元素，持續時間為1秒，流暢的動畫應該以60fps*的速度切換，這意味著需要在開始和結束之間騰出60個單獨的位置，就像電影膠片。 如果按照均勻分布，每個淺色的圓圈代表一個幀動畫。 當圓圈從左向右移動時，這些是向用戶顯示的幀，如下：

在這個動畫中，使用了一個線性定時函數，意味著元素以恒定的速度移動，圖片中的圓圈每一幀的移動量都是相同的。

在CSS中有幾種動畫效果可供使用，通過transition-timing-function屬性來指定：

-3{transition:transform250ms;transition-timing-function:linear;/*或者使用推薦方式*//*transition:transform250mslinear;*/}ease-out

ease-out的效果一頭野牛沖了進來，但它耗盡了能量，到最后，就像一只昏昏欲睡的烏龜一樣緩慢前行。

從圖片效果可以看出前幾幀的速度特別的塊，以及它在最后變得迅速降低。

ease-in

eease-in的效果正好與ease-out相反，就有點洗衣機脫水，開始慢慢轉動，然后快速加速。

ease-in-out

ease-in-out是前面兩個動畫效果的組合：

ease

ease與ease-in-out不同，它不是對稱的，它的特點是有一個短暫的加速和很大的減速。

ease是默認值，如果沒有指定動畫效果，則默認使用ease。

自定義曲線

如果提供的內置選項不能滿足需求，可以使用三次貝塞爾timing函數自定義緩動曲線。

-4{transition:transform250mscubic-bezier(0.1,0.2,0.3,0.4);}

從上面語法可以看到所有值都是這個cubic-bezier函數的預設值，它需要4個數字，代表2個控制點。關于如何定義對應的預設值，推薦一個在線工具cubic-bezier，

調試出滿意的動畫曲線后，單擊頂部的“復制”并將其粘貼到CSS中就可以實現相應的動畫效果。

還可以從這個Easingfunctions緩動函數擴展集中進行選擇，需要主要的是有些效果CSS的支持不是很好，需要根據實際情況選擇。

動畫演示

前面提到動畫應該以60幀/秒的速度運行。 然而，當計算時，意識到這意味著瀏覽器只有16.6毫秒來繪制每一幀，時間真的不多。 作為參考，眨眼大約需要100-300毫秒。 對于動畫的速率，需要設置一個合理的值，要不然設備跟不上，幀會被丟棄。

在實踐中，性能不佳通常會以可變幀率的形式出現，動畫性能是一個非常深入和有趣的主題，這里不做詳細介紹，但以下幾點還是有必要了解一下：

有些CSS屬性在制作動畫時要比其他屬性耗資源得多。 例如，高度改變動畫就是一個非常費資源的屬性，因為它影響布局，當一個元素的高度縮小時，就會引起連鎖反應，它的所有兄弟元素需要向上移動，以填補空間。

其他屬性，如background-color，對于動畫效果來說也有點影響性能，雖然它不會影響布局，但確實需要在每個動畫幀上設置一個顏色。

transform和opacity，是非常推薦的動畫效果，對性能影響不大。如果動畫當前調整了width或left等屬性，則可以通過transform來進行轉換（盡管并不總是可以達到完全相同的效果）

請務必在網站/應用所針對的最低端設備上測試動畫，為低端設備提供兼容的方案，如去掉動畫效果。

硬件加速

根據最終用戶瀏覽器和操作系統的不同，如下圖的效果，就存在小缺陷：

仔細觀察按鈕字母，注意到它們在轉換的開始和結束時出現了輕微的偏移，這是因為計算機的CPU和GPU之間的切換導致的。 當使用transform和opacity為元素設置動畫時，瀏覽器有時會嘗試優化此動畫效果。 它不是在每一幀上光柵化像素，而是將所有內容作為紋理傳輸到GPU，而GPU非常擅長進行這類基于紋理的轉換，因此，得到了非常流暢、非常高性能的動畫，這被稱為硬件加速。

硬件加速因此也叫GPU加速，是利用GPU進行渲染，減少CPU操作的一種優化方案。 由于GPU中的transform等CSS屬性不會觸發重繪，所以能大大提高網頁的性能。

可以通過添加以下CSS的will-change屬性來設置硬件加速：

will-change為web開發者提供了一種告知瀏覽器該元素會有哪些變化的方法，這樣瀏覽器可以在元素屬性真正發生變化之前提前做好對應的優化準備工作。

-5{will-change:transform;}

will-change允許向瀏覽器聲明將要為所選元素設置動畫，并且應該針對這種情況進行優化，這樣瀏覽器會一直讓GPU處理這個元素。 不再需要CPU和GPU之間的切換，不再有卡入到位的現象。

CSS中的以下屬性能觸發硬件加速：

will-change

如果有一些元素不需要用到上述屬性，但是需要觸發硬件加速效果，可以使用一些小技巧來誘導瀏覽器開啟硬件加速，如下：

{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);/**或者**/transform:rotateZ(360deg);transform:translate3d(0,0,0);}

即使用translateZ()（或translate3d()）這種hack方式（有時也稱為null變換hack）來讓瀏覽器對animation或transform行為使用硬件加速，通過向一個不會在三維空間中轉換的元素添加簡單的3D變換來實現硬件加速。

總結

前面介紹keyframes的使用《CSS交互動畫指南之keyframes》，結合本文的transition，基本可以為前端項目增加相應的改善性的動畫。

作者：天行無忌

css3 實現動畫效果，怎樣使他無限循環動下去？

鼠標懸停，圖標會一直不停旋轉。 如果實現圖標一直不停旋轉，則需要使用animation動畫。 先制作動畫的各個關鍵幀，然后在圖標中運用這一動畫。

具體操作如下：

CSS交互動畫指南之keyframes

過去WEB需要實現交互動畫效果是使用flash、javascript、Gif，近年來隨著flash的淘汰，javascript和CSS功能的增強，使得現代WEB應用的交互越來越豐富。 借此總結一下CSS交互動畫實現的基礎，關鍵的知識點是keyframes，文章涉及的代碼示例效果可以點擊查看動畫效果。

語法

keyframe動畫的實現原理跟flash的實現方式類似，在CSS塊之間進行關鍵幀的屬性的更新。下面定義一個keyframe動畫，將元素的水平位置從-100%平滑地漸變到0%：

@keyframesslide-in{from{transform:translateX(-100%);}to{transform:translateX(0%);}}

每個@keyframes語句都需要一個名稱，一般為交互動畫效果名稱，上面的代碼定了一個滑入slide-in的效果名稱。

和其它CSS一樣，keyframe動畫也是可以通用的和可重用的，可以將它們應用到特定選擇器的animation屬性中：

-in{animation:slide-in1000ms;}

上面的代碼定了在1000ms內，將translateX屬性進行改變，并且立即執行。

可以在同一個動畫聲明中定義多個屬性的變化，如下：

-in{animation:drop-in1000ms;}@keyframesdrop-in{from{transform:rotate(-30deg)translateY(-100%);opacity:0;}to{transform:rotate(0deg)translateY(0%);opacity:1;}}動畫效果

動畫效果使用animation-timing-function屬性，定義CSS動畫在每一動畫周期中執行的節奏，既是常說的動畫效果，類似jquery中的easing。

-in-out{animation-timing-function:ease-in-out;}循環動畫

默認情況下，keyframe動畫只會運行一次，但可以使用animation-iteration-count屬性來控制動畫執行次數。

-three{animation-iteration-count:3;}

如果是無限次將其值設置為infinite，有限次就按照具體要求輸入次數。

{animation:spin1000ms;animation-timing-function:linear;animation-iteration-count:infinite;}@keyframesspin{from{transform:rotate(0turn);}to{transform:rotate(1turn);}}多步動畫

除了from和to關鍵字，還可以使用百分比，可以定義兩個及以上的動畫步驟：

-spinner{animation:fancy-spin2000ms;animation-iteration-count:infinite;}@keyframesfancy-spin{0%{transform:rotate(0turn)scale(1);}25%{transform:rotate(1turn)scale(1);}50%{transform:rotate(1turn)scale(0.5);}75%{transform:rotate(0turn)scale(0.5);}100%{transform:rotate(0turn)scale(1);}}交替動畫

假設要讓一個元素“呼吸”，充氣和放氣?？梢詫⑵湓O置為3步動畫：

-shrink{animation:grow-and-shrink4000ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;}@keyframesgrow-and-shrink{0%{transform:scale(1);}50%{transform:scale(0.5);}100%{transform:scale(1);}}

上面的動畫效果還有一種更優雅的方式，使用animation-direction屬性，用來指示動畫是否反向播放。

@keyframesgrow-and-shrink{0%{transform:scale(1);}100%{transform:scale(0.5);}}-shrink{animation:grow-and-shrink2000ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;}

上面定義的動畫都是根據不同屬性定義不同的值，和其他CSS屬性一樣，可以只定義一個屬性值，即animation。

上面定義動畫屬性的方式如下：

animation:grow-and-shrink2000ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;

更簡潔的方式，也是推薦使用的方式，跟padding不一樣的是順序無關緊要：

-in{animation:slide-in1000ms;}0填充模式

keyframe動畫令人困惑的方面可能是填充模式，它們是通往keyframe信心之路的最大障礙。例如希望元素淡出，動畫本身運行良好，但是當它結束時，元素會重新出現一下導致閃現的效果：

-in{animation:slide-in1000ms;}1

為什么元素會執行完動畫后重新再閃現一下并完全可見了，這是因為from和to塊中的聲明只在動畫運行時有效。

1000ms動畫完成過后，元素就按照CSS聲明顯示，而透明度默認情況下是不透明的。 因此動畫完成后透明度又恢復到不透明了。

解決這個問題的一種方法是在動畫之外聲明透明度，如下：

-in{animation:slide-in1000ms;}2

上面的方案雖然解決了問題，但這不是最佳的方式。 最佳的方式是使用屬性animation-fill-mode，設置CSS動畫在執行之前和之后如何將樣式應用于其目標。

-in{animation:slide-in1000ms;}3

animation-fill-mode屬性的參數有以下四個：

none：這是默認值，當動畫未執行時，動畫將不會將任何樣式應用于目標，而是已經賦予給該元素的CSS規則來顯示該元素；forwards：目標將保留由執行期間遇到的最后一個關鍵幀計算值，最后一個關鍵幀取決于animation-direction和animation-iteration-count的值；backwards：動畫將在應用于目標時立即應用第一個關鍵幀中定義的值，并在animation-delay期間保留此值。 第一個關鍵幀取決于animation-direction的值；both：動畫將遵循forwards和backwards的規則，從而在兩個方向上擴展動畫屬性。

動態動畫

keyframe動畫實現了基本的動畫效果，將它們與CSS變量一起使用的時候可以定義更加復雜的效果。

-in{animation:slide-in1000ms;}4

CSS動畫是可以通用的和可重用的，但是這個動畫總是會讓一個元素彈跳62px。 如果不同的元素可以提供不同的“彈跳高度”，就提高了動畫的靈活性。

使用CSS變量，就可以做到：

-in{animation:slide-in1000ms;}5總結

CSS在近幾年發生了多大的變化，功能變得越來越強大，促進未來WEB應用變得更佳豐富。

作者：天行無忌

---

---

相關標簽： 使用視頻教程制作生動的互動、 CSS動畫的簡易演示、 動畫的藝術、 CSS、

上一篇：響應式Web設計的CSS使用視頻教程優化各種設

下一篇：為初學者設計的CSS深入教程分步掌握CSS為初