一文看懂CSS3動畫

文將使用CSS3動畫keyframes創(chuàng)建一個頁面加載器，加載時帶著三個黃色圓點(diǎn)破浪形移動。它將向您展示如何為加載頁面設(shè)計HTML樣式，創(chuàng)建動畫的keyframes，并使用keyframes的動畫延遲。

以下是你將在本教程結(jié)束時制作的內(nèi)容。

圖中的三個黃色圓點(diǎn)，在頁面加載過程中，呈現(xiàn)波浪形的跳動。

首先，先創(chuàng)建一個基本的html文件：

<p>A simple representation of an animated bouncing loader!</p>

<div class="loader">

<span></span>

</div>

文中添加了一個名為loader類的div。這個div負(fù)責(zé)創(chuàng)建所有頁面加載器元素。在這個div中，添加了三個連續(xù)的span元素，每個元素表示一個頁面加載器圓點(diǎn)。

第二步為頁面定義基本的CSS：

/*_ OPTIONAL: Styles for the demo. *_/

body {

background: #2C294F;

padding: 2rem;

}

p {

font: 1rem/1.45 "Operator Mono";

color: #A599E9;

text-align: center;

}

這個代碼塊定義了p標(biāo)記和主體的可選CSS樣式。背景顏色，字體大小等屬性可以根據(jù)自己的愛好更改。不過這些都不是動畫所必須的樣式，只是為了方便呈現(xiàn)動畫效果。

關(guān)鍵的定義是下面的.loader樣式：

/_ CSS for animated bouncing loader. _/

.loader {

display: flex;

justify-content: center;

align-items: center;

}

這里我們使用Flexbox，也就是display:flex; 它將彈跳的頁面加載器水平和垂直放置在頁面中間。

/_ Loader circles _/

.loader > span {

background: #FAD000;

border-radius: 50%;

margin: 5rem 0.5rem;

animation: bouncingLoader 0.6s infinite alternate;

}

.loader > span:nth-child(2) {

animation-delay: 0.2s;

}

.loader > span:nth-child(3) {

animation-delay: 0.4s;

}

默認(rèn)情況下，頁面加載器的形狀是方形的。我們要給它一個圓形形狀，可以將邊界半徑設(shè)置為50%。.loader > span:nth-child(n)是指loader父元素下的第n個子元素。animation-delay是動畫延遲時間。

這里最有趣的部分是animation屬性。我們使用了一個名為bouncingLoader的動畫keyframes，它每0.6s運(yùn)行一次，并且無限重復(fù)。

定義動畫的keyframes。keyframes用于定義動畫行為，并讓我們完全控制CSS動畫的一個周期。我們將它定義為@keyframes，后面跟著動畫的名字，在本例中是bouncingLoader。

在@keyframe規(guī)則中，使用from和to兩個關(guān)鍵字來指定動畫的起始點(diǎn)和結(jié)束點(diǎn)。同樣地，你也可以用0%表示起點(diǎn)，用100%表示動畫的終點(diǎn)。

此外，如果您想要多個動畫轉(zhuǎn)換，您可以定義一個百分比范圍，每個百分比包含一個樣式選擇器列表。這些百分比可以以任何順序列出。這些百分比的簡單表示如下所示：

/_ Define the animation called bouncingLoader. _/

@keyframes bouncingLoader {

from {

width: 0.1rem;

height: 0.1rem;

opacity: 1;

transform: translate3d(0);

}

to {

width: 1rem;

height: 1rem;

opacity: 0.1;

transform: translate3d(0, -1rem, 0);

}

這使用了from和to關(guān)鍵字，它們定義了圓點(diǎn)的寬度、高度和不透明度等基本樣式屬性。Loader中每個圓圈的寬和高從0.1rem到width:1rem;和height:1rem; 除此之外，為了創(chuàng)建彈跳效果，使用CSS transform屬性更改給定元素的坐標(biāo)，從而轉(zhuǎn)換每個圓點(diǎn)的位置。

使用這個transform屬性，采用了translate3D()函數(shù)，它接受三個輸入來解釋(x, y, z)坐標(biāo)的變化。因為我們希望我們的裝載機(jī)在波動運(yùn)動中運(yùn)行，我們需要主要沿著y軸平移，保持x軸和z軸不變。因此，結(jié)束點(diǎn)的值為(0，-1rem, 0)。

最后一部分。既然已經(jīng)為@keyframe編寫了代碼，現(xiàn)在就該設(shè)置并運(yùn)行它了。動畫的運(yùn)行是通過以下幾行代碼實現(xiàn)的（上面已顯示過一次）:

/_ Loader circles _/

.loader > span {

background: #FAD000;

border-radius: 50%;

margin: 5rem 0.5rem;

animation: bouncingLoader 0.6s infinite alternate;

}

.loader > span:nth-child(2) {

animation-delay: 0.2s;

}

.loader > span:nth-child(3) {

animation-delay: 0.4s;

}

使用animation屬性和/或它的子屬性對想要動畫的元素進(jìn)行樣式設(shè)置。使用此屬性可以控制動畫的時間、持續(xù)時間和其他細(xì)節(jié)。

這里你已經(jīng)使用了以下動畫的子屬性:

animation: animation-name, animation-duration, animation-iteration-count, animation-direction;

animation-name: 定義你的動畫的名字，在我的例子中是加載器。

animation-duration: 配置動畫完成一個循環(huán)的時間長度。

animation-iteration-count: 表示你希望動畫循環(huán)在停止前播放多少次。

animation-direction: 定義動畫播放的方向。

除了這些，還有其他幾個子屬性。你可以在Mozilla Web文檔中獲得詳細(xì)信息。

基于這些，本文的動畫定義如下:

animation: bouncingLoader 0.6s infinite alternate;

這行代碼做了以下三件事:

告訴loader元素使用keyframes bouncingLoader。

設(shè)置動畫的長度為0.6秒。

無限次地運(yùn)行動畫。在完成一個循環(huán)后，動畫的方向就會發(fā)生變化，也就是反轉(zhuǎn)。

你已經(jīng)為彈跳加載器的第一個圓點(diǎn)定義了這些屬性。為了瞄準(zhǔn)第二個(2)和第三個(3)圓點(diǎn)，你使用了第n個子(n)選擇器，它允許你選擇和瞄準(zhǔn)一個或多個元素，它們是父元素的第n個子元素。此外，對于其余的span元素，您剛剛定義了動畫延遲，因此每個元素不會同時開始動畫，而是延遲了定義時間后才開始，結(jié)果就是破浪形狀。

深入探索CSS動畫的魅力-附帶動畫實例

**開篇：揭秘CSS動畫世界**

CSS動畫作為現(xiàn)代網(wǎng)頁設(shè)計中不可或缺的一部分，賦予了網(wǎng)頁前所未有的生動性和互動性。從微妙的過渡效果到炫酷的視覺特效，CSS動畫以其高效、易用的特點(diǎn)吸引了無數(shù)前端開發(fā)者。在這篇深度解析文章中，我們將一起走進(jìn)CSS動畫的世界，從基礎(chǔ)知識到高級技巧，通過一系列詳盡的實例，揭示CSS動畫背后的秘密及其在實際項目中的應(yīng)用場景。

---

### **一、CSS動畫基礎(chǔ)概念與關(guān)鍵幀動畫(Keyframes)**

**標(biāo)題：** 掌握@keyframes規(guī)則，構(gòu)建動畫流程

CSS動畫的核心在于`@keyframes`規(guī)則，它允許開發(fā)者定義動畫序列中的不同關(guān)鍵幀狀態(tài)。例如，創(chuàng)建一個元素從左到右移動的簡單動畫：

```html

<!DOCTYPE html>

<head>

<style>

@keyframes moveRight {

0% { left: 0; }

100% { left: calc(100% - 50px); }

}

.animatedElement {

position: relative;

width: 50px;

height: 50px;

background-color: red;

animation: moveRight 2s ease infinite;

}

</style>

</head>

<body>

</body>

</html>

```

在這個例子中，我們定義了一個名為`moveRight`的動畫，使其在2秒內(nèi)從屏幕左側(cè)移動到右側(cè)。通過`animation`屬性將此動畫應(yīng)用于`.animatedElement`類。

---

### **二、CSS動畫屬性詳解與應(yīng)用**

**標(biāo)題：** 理解動畫屬性，掌控動畫生命周期

CSS動畫由一系列可控制屬性組成，包括但不限于：

- `animation-name`: 定義使用的@keyframes名稱；

- `animation-duration`: 設(shè)置動畫完成一個周期所需的時間；

- `animation-timing-function`: 控制動畫速度曲線（如ease、linear、ease-in-out）；

- `animation-delay`: 動畫開始前的延遲時間；

- `animation-iteration-count`: 動畫重復(fù)次數(shù)（如無限循環(huán)使用`infinite`）；

- `animation-direction`: 控制動畫是否反向播放；

- `animation-fill-mode`: 定義動畫在執(zhí)行前后元素的狀態(tài)。

---

### **三、CSS動畫進(jìn)階：疊加與合成模式**

**標(biāo)題：** 探索層疊與合成，實現(xiàn)復(fù)雜動畫效果

CSS動畫可以疊加和組合，利用`animation-play-state`屬性暫停或恢復(fù)動畫，結(jié)合`animation-composite`屬性來處理多個動畫間的堆疊順序與效果：

```html

<style>

.combinedAnimation {

/* 假設(shè)已有兩個動畫定義 */

animation: moveRight 2s ease, fadeInOut 1s linear;

animation-fill-mode: both;

}

/* 針對某個事件，例如懸停時暫停所有動畫 */

.combinedAnimation:hover {

animation-play-state: paused;

}

</style>

```

---

### **四、CSS動畫與JavaScript聯(lián)動**

**標(biāo)題：** 使用JavaScript操控CSS動畫，增強(qiáng)交互性

盡管CSS動畫本身具備豐富的特性，但結(jié)合JavaScript可以實現(xiàn)更靈活的動態(tài)控制。下面是一個簡單的示例，通過JavaScript觸發(fā)CSS動畫：

```html

<div id="animateOnHover" class="hiddenContent">Hover me!</div>

<style>

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

.hiddenContent {

opacity: 0;

animation-duration: 1s;

animation-fill-mode: both;

}

.visibleContent {

animation-name: fadeIn;

}

</style>

const animateOnHover = document.getElementById('animateOnHover');

animateOnHover.addEventListener('mouseover', () => {

animateOnHover.classList.add('visibleContent');

});

animateOnHover.addEventListener('mouseout', () => {

animateOnHover.classList.remove('visibleContent');

});

</script>

```

---

**五、響應(yīng)式與無障礙CSS動畫**

**標(biāo)題：** 考慮不同設(shè)備與用戶需求，打造包容性動畫

在設(shè)計CSS動畫時，務(wù)必考慮響應(yīng)式布局與無障礙訪問。確保動畫在不同尺寸的屏幕上適配良好，并針對視障用戶提供替代內(nèi)容或禁用動畫。

---

**結(jié)語：**

深入挖掘CSS動畫技術(shù)，不僅能創(chuàng)造出美輪美奐的用戶體驗，更能展現(xiàn)前端開發(fā)者細(xì)膩的藝術(shù)觸覺與卓越的技術(shù)實力。實踐這些動畫實例，不斷拓展想象空間，讓網(wǎng)頁設(shè)計充滿生命力，從而引領(lǐng)用戶在瀏覽過程中享受無與倫比的互動樂趣。隨著瀏覽器技術(shù)的不斷發(fā)展，CSS動畫的未來充滿了無限可能，讓我們共同期待并創(chuàng)造更多的精彩瞬間。

頁動畫圖像、Flash 動畫和 JavaScript 實現(xiàn)的效果圖片，我們用最基礎(chǔ)的CSS也能實現(xiàn)。制作一個簡單的gif動畫圖，上圖就是效果圖。

用CSS3制作動畫圖，你需要了解兩個css屬性。

其一是 @keyframes

因為它限定了CSS 樣式和動畫逐步從目前的樣式更改為新的樣式的變化過程。瀏覽器兼容的時候需要在keyframes上加前綴，-webkit-, -ms- 或 -moz- 。

keyframes中有兩個屬性，from和to，from里面的內(nèi)容定義動畫開始的狀態(tài)，to記錄動畫結(jié)束的狀態(tài)。@keyframes后面緊跟的是動畫的名字，這個可以自定義取名字，比如我取 gifname，頁面某個標(biāo)簽元素使用這個動畫時候，就需要用到這個名字。

@keyframes gifname
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

from和to也可以用百分比來表示動畫的過程，可以用百分比的話，就可以把動畫的內(nèi)容定義得更加豐富了。

@keyframes gifname
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes gifname /* Safari 與 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

比如我在一個div元素上用到這個動畫

div
{
    animation: gifname 5s;
    -webkit-animation: gifname 5s; /* Safari 與 Chrome */
}

其二是 animation

剛剛我們在div元素中看到的animation就是我們要認(rèn)識的第二個屬性。animation其實是一堆屬性的簡寫。比如看下面一句代碼：

 animation:gifname 2s step-start 1s infinite alternate;

這一句其實可以寫成

    animation-name: gifname;
    animation-duration: 2s;
    animation-timing-function: step-start;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;

animation-name：動畫名稱

這里是引入 @keyframes 動畫的名稱。

animation-duration：動畫的持續(xù)時間

單位可以是秒(s)，也可以是毫秒(ms)

animation-timing-function：動畫的過度類型

屬性值 :默認(rèn)是 "ease"

linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

ease：平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)

ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)

ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

cubic-bezier(n,n,n,n):在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。

step-start:馬上跳到動畫每一結(jié)束幀的狀態(tài)

animation-delay：動畫延遲時間

默認(rèn)是 0。

animation-iteration-count：動畫循環(huán)次數(shù)

默認(rèn)是 1。屬性值infinite 代表無數(shù)次。

animation-direction：動畫是否在下一周期逆向地播放

屬性值

normal：正常方向

reverse：反方向運(yùn)行

alternate：動畫先正常運(yùn)行再反方向運(yùn)行，并持續(xù)交替運(yùn)行

alternate-reverse：動畫先反運(yùn)行再正方向運(yùn)行，并持續(xù)交替運(yùn)行

另外還有兩項屬性：

animation-fill-mode:設(shè)置動畫播放后的效果

取值:

none:初始樣式,不改變默認(rèn)行為.(默認(rèn)行為)

forwards:動畫播放結(jié)束后保持最后一個狀態(tài);

backwards:結(jié)束后保持第一個狀態(tài);

animation-play-state :檢索或設(shè)置對象動畫的狀態(tài)

屬性值

animation-play-state:running | paused;

running:運(yùn)動

paused: 暫停

animation-play-state:paused; 當(dāng)鼠標(biāo)經(jīng)過時動畫停止，鼠標(biāo)移開動畫繼續(xù)執(zhí)行

到此為止，屬性我們都學(xué)習(xí)完了，開始實踐部分：

首先準(zhǔn)備好我們需要的圖片，這里我使用了九張圖片。

我把九張圖片放在九個<li></li>標(biāo)簽里。所有l(wèi)i標(biāo)簽用ul標(biāo)簽包含起來。然后把ul放在一個div標(biāo)簽里，div設(shè)置成一張圖片的大小，然后通過逐幀移動ul元素實現(xiàn)動畫。

最后的處理，把超出div元素的部分隱藏即可。然后就得到了文章開始時候的圖片了。

最關(guān)鍵的，上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css動畫</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        margin-right: 0;
    }
#div{
    width:100px;
	height:100px;
    border: 1px solid #fff;
    overflow: hidden;
	margin: 100px 0 0 100px;
    }
    #box{
     width:900px;
     height:100px;   
    border: 1px solid #fff;
    overflow:visible;
    position:relative;
    animation:myfirst 2s step-start 1s infinite ;
    /* Firefox: */
	-moz-animation:myfirst 2s step-start 1s infinite ;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 2s step-start 1s infinite ;
	/* Opera: */
	-o-animation:myfirst 2s step-start 1s infinite ;
    }
    #box li{
        float: left;
        width:98px;
        height:100px; 
        border:1px solid #fff;
    }
    li img{
        width:100%;
        height:100%;
    }
    @keyframes myfirst
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
    55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}
@-moz-keyframes myfirst /* Firefox */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
  100% {left:0px; top:0;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   { left:0px; top:0;}
	11.1%  { left:-100px; top:0;}
	22.2%  { left:-200px; top:0;}
	33.3%  { left:-300px; top:0;}
	44.4%  { left:-400px; top:0;}
  55.5%  { left:-500px; top:0;}
	66.6%  { left:-600px; top:0;}
	77.7%  { left:-700px; top:0;}
	88.8%  { left:-800px; top:0;}
   100% {left:0px; top:0;}
}

    </style>
</head>
<body>
    <div id="div">
        <ul id="box">
            <li><img src="./img/o1.jpg"/></li>
            <li><img src="./img/o2.jpg"/></li>
            <li><img src="./img/o3.jpg"/></li>
            <li><img src="./img/o4.jpg"/></li>
            <li><img src="./img/o5.jpg"/></li>
            <li><img src="./img/o6.jpg"/></li>
            <li><img src="./img/o7.jpg"/></li>
            <li><img src="./img/o8.jpg"/></li>
            <li><img src="./img/o9.jpg"/></li>
        </ul>
    </div>
</body>
</html>

最后嘮叨一句，該動畫不支持IE9及更早版本的IE瀏覽器。

喜歡的話，就點(diǎn)贊支持一下吧！

在線咨詢

上一篇：JavaScript全局變量、局部變量與作用域鏈揭秘
下一篇：收藏 - 5個高質(zhì)量免費(fèi)視頻下載網(wǎng)站，無版權(quán)，無水印，放心使用

您的項目需求

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

整合營銷服務(wù)商

一文看懂CSS3動畫

其一是 @keyframes

其二是 animation

您的項目需求