一文看懂CSS3動畫

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

以下是你將在本教程結束時制作的內容。

圖中的三個黃色圓點，在頁面加載過程中，呈現波浪形的跳動。

首先，先創建一個基本的html文件：

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

<div class="loader">

<span></span>

</div>

文中添加了一個名為loader類的div。這個div負責創建所有頁面加載器元素。在這個div中，添加了三個連續的span元素，每個元素表示一個頁面加載器圓點。

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

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

body {

background: #2C294F;

padding: 2rem;

}

p {

font: 1rem/1.45 "Operator Mono";

color: #A599E9;

text-align: center;

}

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

關鍵的定義是下面的.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;

}

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

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

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

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

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

/_ 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關鍵字，它們定義了圓點的寬度、高度和不透明度等基本樣式屬性。Loader中每個圓圈的寬和高從0.1rem到width:1rem;和height:1rem; 除此之外，為了創建彈跳效果，使用CSS transform屬性更改給定元素的坐標，從而轉換每個圓點的位置。

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

最后一部分。既然已經為@keyframe編寫了代碼，現在就該設置并運行它了。動畫的運行是通過以下幾行代碼實現的（上面已顯示過一次）:

/_ 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屬性和/或它的子屬性對想要動畫的元素進行樣式設置。使用此屬性可以控制動畫的時間、持續時間和其他細節。

這里你已經使用了以下動畫的子屬性:

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

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

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

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

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

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

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

animation: bouncingLoader 0.6s infinite alternate;

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

告訴loader元素使用keyframes bouncingLoader。

設置動畫的長度為0.6秒。

無限次地運行動畫。在完成一個循環后，動畫的方向就會發生變化，也就是反轉。

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

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

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

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

---

### **一、CSS動畫基礎概念與關鍵幀動畫(Keyframes)**

**標題：** 掌握@keyframes規則，構建動畫流程

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

```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秒內從屏幕左側移動到右側。通過`animation`屬性將此動畫應用于`.animatedElement`類。

---

### **二、CSS動畫屬性詳解與應用**

**標題：** 理解動畫屬性，掌控動畫生命周期

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

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

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

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

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

- `animation-iteration-count`: 動畫重復次數（如無限循環使用`infinite`）；

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

- `animation-fill-mode`: 定義動畫在執行前后元素的狀態。

---

### **三、CSS動畫進階：疊加與合成模式**

**標題：** 探索層疊與合成，實現復雜動畫效果

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

```html

<style>

.combinedAnimation {

/* 假設已有兩個動畫定義 */

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

animation-fill-mode: both;

}

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

.combinedAnimation:hover {

animation-play-state: paused;

}

</style>

```

---

### **四、CSS動畫與JavaScript聯動**

**標題：** 使用JavaScript操控CSS動畫，增強交互性

盡管CSS動畫本身具備豐富的特性，但結合JavaScript可以實現更靈活的動態控制。下面是一個簡單的示例，通過JavaScript觸發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>

```

---

**五、響應式與無障礙CSS動畫**

**標題：** 考慮不同設備與用戶需求，打造包容性動畫

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

---

**結語：**

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

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

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

其一是 @keyframes

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

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

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

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

@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就是我們要認識的第二個屬性。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：動畫的持續時間

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

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

屬性值 :默認是 "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 函數中自己的值。可能的值是從 0 到 1 的數值。

step-start:馬上跳到動畫每一結束幀的狀態

animation-delay：動畫延遲時間

默認是 0。

animation-iteration-count：動畫循環次數

默認是 1。屬性值infinite 代表無數次。

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

屬性值

normal：正常方向

reverse：反方向運行

alternate：動畫先正常運行再反方向運行，并持續交替運行

alternate-reverse：動畫先反運行再正方向運行，并持續交替運行

另外還有兩項屬性：

animation-fill-mode:設置動畫播放后的效果

取值:

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

forwards:動畫播放結束后保持最后一個狀態;

backwards:結束后保持第一個狀態;

animation-play-state :檢索或設置對象動畫的狀態

屬性值

animation-play-state:running | paused;

running:運動

paused: 暫停

animation-play-state:paused; 當鼠標經過時動畫停止，鼠標移開動畫繼續執行

到此為止，屬性我們都學習完了，開始實踐部分：

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

我把九張圖片放在九個<li></li>標簽里。所有li標簽用ul標簽包含起來。然后把ul放在一個div標簽里，div設置成一張圖片的大小，然后通過逐幀移動ul元素實現動畫。

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

最關鍵的，上代碼：

<!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瀏覽器。

喜歡的話，就點贊支持一下吧！

在線咨詢

上一篇：JavaScript全局變量、局部變量與作用域鏈揭秘
下一篇：收藏 - 5個高質量免費視頻下載網站，無版權，無水印，放心使用

您的項目需求

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

整合營銷服務商

一文看懂CSS3動畫

其一是 @keyframes

其二是 animation

您的項目需求