什么是CSS動畫？CSS動畫屬性有哪些？

么是CSS動畫？

CSS動畫就是通過CSS代碼搭建的網頁動畫。允許設計師和開發人員，通過編輯網站的CSS代碼添加簡單的頁面動畫。可實現HTML元素的動畫效果，從一種樣式逐漸變化為另一種樣式的效果。

CSS動畫屬性有哪些？

animation-direction屬性：設置動畫是否在下一周期逆向播放，默認是 "正常"。

animation-name屬性：定義動畫名稱，用于指定由設置定義的動畫的一個或多個名稱。

animation-iteration-count屬性：用于指定動畫停止前播放動畫循環的次數，即：播放次數。

animation-iteration-count屬性：規定動畫播放的次數，默認值是 1。

以往，想在HTML上實現動畫效果，要不就用被喬布斯恨死的了Flash 動畫，要不就用網頁動畫圖像或者JavaScript 實現效果。在CSS3之后，就可以用CSS在HTML上實現動畫了。

要創建 CSS3 動畫，你需要了解 @keyframes 規則。現在 @keyframes 創建動畫時，需將其綁定到一個選擇器，否則動畫不會有任何效果。

13.1 原生創建動畫

用CSS3原生代碼創建動畫，語法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，動畫的名稱；

keyframes-selector：必需，動畫時長的百分比合法的值：0-100%， from（與 0% 相同），to（與 100% 相同）
css-styles：必需，一個或多個合法的 CSS 樣式屬性。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>動起來</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst 5s;
            -webkit-animation: firstan 5s; /* Safari and Chrome */
        }

        @keyframes firstan {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>
<body>
<div/>
</body>
</html>

輸出結果

13.2 動畫庫創建

如果每次都要自己手動用CSS去創建動畫，那效果太低了。為此，有人專門專門開發了CSS動畫庫animation.css。可以在線https://animate.stylek看效果，它里面的動畫效果，可以滿足大多數需求了。下載https://github.com/animate-css/animate.css里的animate.min.css文件，放到HTML文件相同目錄下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用動畫庫實現動畫</title>
    <link rel="stylesheet" type="text/css" href="animate.min.css"/>
</head>
<body>
<main class="animate__animated animate__fadeInLeft">
    老陳說編程，動畫效果行
</main>
</body>
</html>

輸出結果

好了，有關CSS動畫效果的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關注我，沒錯的。

#前端##HTML5##CSS##程序員##Web#

言

CSS3引入了強大的動畫功能，使得開發者能夠在不依賴JavaScript的情況下創建豐富的視覺動效。本文將深入探討CSS3動畫的核心概念、主要特性以及如何通過關鍵幀動畫和過渡效果實現各類動畫效果。

1. CSS3動畫基礎知識

1.1 過渡（Transition）

過渡是CSS3中最為基礎的動畫形式之一，它定義了一個元素在兩種狀態之間變化時的速度曲線和時間間隔。

/* 基本語法 */
.element {
  transition: property duration timing-function delay;
}

/* 示例 */
.button {
  background-color: red;
  transition: background-color 0.5s ease-in-out;
}

在這個例子中，當.button的background-color屬性發生變化時，將會在0.5秒內平滑過渡。

1.2 關鍵幀動畫（Keyframes）

關鍵幀動畫允許我們自定義更復雜的動畫序列，包括多個中間狀態。

/* 定義關鍵幀動畫 */
@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* 應用動畫 */
.element {
  animation: fadeInOut 2s infinite;
}

上述代碼定義了一個名為fadeInOut的關鍵幀動畫，該動畫讓元素從透明度0漸變至1再回到0，整個動畫循環持續2秒，并且無限重復。

2. 動畫屬性與值

animation-name: 指定要使用的@keyframes規則名稱。
animation-duration: 設置動畫完成一個周期所花費的時間。
animation-timing-function: 控制動畫速度曲線，如ease, linear, ease-in, ease-out等。
animation-delay: 動畫開始前等待的時間。
animation-iteration-count: 動畫播放次數，可以設置為具體數字或infinite表示無限循環。
animation-direction: 控制定向性動畫是否應該在每次迭代中反向播放，默認為normal，即每次迭代按相同的順序播放。
animation-fill-mode: 規定在動畫執行之前和之后的狀態，例如forwards可以讓動畫在結束后保持最后一個關鍵幀的樣式。

3. 高級應用及技巧

動畫同步與堆疊: 可以通過給不同的動畫屬性設置不同值來控制多個動畫的同時運行或堆疊。
CSS動畫事件監聽: 利用JavaScript的transitionend和animationend事件可以捕獲動畫結束時觸發的動作。
使用will-change屬性: 提升動畫性能，提前告知瀏覽器哪些屬性即將改變并可能需要創建層以便優化渲染。

4. 實戰案例

示例1 - 圖片淡入淡出滾動效果

.image-slide {
  opacity: 0;
  transition: opacity 0.5s;
  will-change: opacity;
  
  /* 當圖片進入可視區域時觸發動畫 */
  &.is-visible {
    opacity: 1;
  }
}

示例2 - 旋轉動畫

.rotate {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

總結起來，CSS3動畫功能強大且靈活，通過過渡和關鍵幀動畫，我們可以輕松構建豐富多樣的網頁動態效果，提升用戶體驗并增強交互性。隨著對CSS3動畫特性的深入理解和掌握，開發者能夠更加自如地運用這些技術來創作富有創意和吸引力的Web界面。

在線咨詢

上一篇：報到！我是9514.8萬分之一
下一篇：GitHub和碼云上，7個h5頁面制作工具推薦

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商