什么是CSS動(dòng)畫？CSS動(dòng)畫屬性有哪些？

么是CSS動(dòng)畫？

CSS動(dòng)畫就是通過CSS代碼搭建的網(wǎng)頁動(dòng)畫。允許設(shè)計(jì)師和開發(fā)人員，通過編輯網(wǎng)站的CSS代碼添加簡單的頁面動(dòng)畫。可實(shí)現(xiàn)HTML元素的動(dòng)畫效果，從一種樣式逐漸變化為另一種樣式的效果。

CSS動(dòng)畫屬性有哪些？

animation-direction屬性：設(shè)置動(dòng)畫是否在下一周期逆向播放，默認(rèn)是 "正常"。

animation-name屬性：定義動(dòng)畫名稱，用于指定由設(shè)置定義的動(dòng)畫的一個(gè)或多個(gè)名稱。

animation-iteration-count屬性：用于指定動(dòng)畫停止前播放動(dòng)畫循環(huán)的次數(shù)，即：播放次數(shù)。

animation-iteration-count屬性：規(guī)定動(dòng)畫播放的次數(shù)，默認(rèn)值是 1。

以往，想在HTML上實(shí)現(xiàn)動(dòng)畫效果，要不就用被喬布斯恨死的了Flash 動(dòng)畫，要不就用網(wǎng)頁動(dòng)畫圖像或者JavaScript 實(shí)現(xiàn)效果。在CSS3之后，就可以用CSS在HTML上實(shí)現(xiàn)動(dòng)畫了。

要?jiǎng)?chuàng)建 CSS3 動(dòng)畫，你需要了解 @keyframes 規(guī)則。現(xiàn)在 @keyframes 創(chuàng)建動(dòng)畫時(shí)，需將其綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。

13.1 原生創(chuàng)建動(dòng)畫

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>動(dòng)起來</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>

輸出結(jié)果

13.2 動(dòng)畫庫創(chuàng)建

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

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

輸出結(jié)果

好了，有關(guān)CSS動(dòng)畫效果的內(nèi)容，老陳講完了，如果覺得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。

一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒錯(cuò)的。

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

言

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

1. CSS3動(dòng)畫基礎(chǔ)知識(shí)

1.1 過渡（Transition）

過渡是CSS3中最為基礎(chǔ)的動(dòng)畫形式之一，它定義了一個(gè)元素在兩種狀態(tài)之間變化時(shí)的速度曲線和時(shí)間間隔。

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

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

在這個(gè)例子中，當(dāng).button的background-color屬性發(fā)生變化時(shí)，將會(huì)在0.5秒內(nèi)平滑過渡。

1.2 關(guān)鍵幀動(dòng)畫（Keyframes）

關(guān)鍵幀動(dòng)畫允許我們自定義更復(fù)雜的動(dòng)畫序列，包括多個(gè)中間狀態(tài)。

/* 定義關(guān)鍵幀動(dòng)畫 */
@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* 應(yīng)用動(dòng)畫 */
.element {
  animation: fadeInOut 2s infinite;
}

上述代碼定義了一個(gè)名為fadeInOut的關(guān)鍵幀動(dòng)畫，該動(dòng)畫讓元素從透明度0漸變至1再回到0，整個(gè)動(dòng)畫循環(huán)持續(xù)2秒，并且無限重復(fù)。

2. 動(dòng)畫屬性與值

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

3. 高級(jí)應(yīng)用及技巧

動(dòng)畫同步與堆疊: 可以通過給不同的動(dòng)畫屬性設(shè)置不同值來控制多個(gè)動(dòng)畫的同時(shí)運(yùn)行或堆疊。
CSS動(dòng)畫事件監(jiān)聽: 利用JavaScript的transitionend和animationend事件可以捕獲動(dòng)畫結(jié)束時(shí)觸發(fā)的動(dòng)作。
使用will-change屬性: 提升動(dòng)畫性能，提前告知瀏覽器哪些屬性即將改變并可能需要?jiǎng)?chuàng)建層以便優(yōu)化渲染。

4. 實(shí)戰(zhàn)案例

示例1 - 圖片淡入淡出滾動(dòng)效果

.image-slide {
  opacity: 0;
  transition: opacity 0.5s;
  will-change: opacity;
  
  /* 當(dāng)圖片進(jìn)入可視區(qū)域時(shí)觸發(fā)動(dòng)畫 */
  &.is-visible {
    opacity: 1;
  }
}

示例2 - 旋轉(zhuǎn)動(dòng)畫

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

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

總結(jié)起來，CSS3動(dòng)畫功能強(qiáng)大且靈活，通過過渡和關(guān)鍵幀動(dòng)畫，我們可以輕松構(gòu)建豐富多樣的網(wǎng)頁動(dòng)態(tài)效果，提升用戶體驗(yàn)并增強(qiáng)交互性。隨著對(duì)CSS3動(dòng)畫特性的深入理解和掌握，開發(fā)者能夠更加自如地運(yùn)用這些技術(shù)來創(chuàng)作富有創(chuàng)意和吸引力的Web界面。

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商