第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

我的購物車

已加入門課程

購物車里空空如也

快去這里選購你中意的課程

實戰(zhàn)課

我的訂單中心

全部開發(fā)者教程

雪碧圖入門教程

什么是雪碧圖？

什么是雪碧圖？雪碧圖和雪碧之間有什么關系？為什么要使用雪碧圖？雪碧圖過時了嗎？

雪碧圖的常見形式

JPG 格式圖片 PNG 格式圖片 SVG 格式圖片雪碧圖：矩形圖雪碧圖：條形圖

雪碧圖的語法

背景圖片背景圖定位動態(tài)變更背景圖位置雪碧圖尺寸不吻合時怎么辦？

動畫入門

過渡動畫和幀動畫的區(qū)別適合過渡動畫的場景適合用幀動畫的場景幀動畫和過渡動畫的優(yōu)缺點

幀動畫基礎

CSS 動畫的定義 CSS 動畫的調(diào)用幀動畫函數(shù)steps()的解析

動畫實戰(zhàn)

動畫實例項目結(jié)構(gòu) 定義動畫調(diào)用動畫連接兩個雪碧圖的動畫

首頁慕課教程雪碧圖入門教程 CSS 動畫的調(diào)用

手撕紅黑樹 · 更新于 2020-11-11

上一節(jié)

CSS 動畫的定義

幀動畫函數(shù)steps()的解析

下一節(jié)

1. 調(diào)用動畫

定義好動畫之后就需要在想要的位置去調(diào)用啦，先來學習一下動畫調(diào)用的語法：

animation: name duration timing-function delay iteration-count direction fill-mode;

當然寫的時候可絕對不是這么寫的啊，只有冒號前面的animation這個單詞不變，剩下單詞全部都要替換，那么要替換成什么呢？

請看中文翻譯版：

animation: 定義過的動畫名 動畫時長 動畫運行的方式 延遲 動畫次數(shù) 動畫方向 填充模式;

是不是看到這里直接暈了，甚至有種想關掉網(wǎng)頁的沖動？不要怕，這些只是看起來嚇人，其實都是紙老虎。

而且也不是這些屬性都要用到，哪個屬性你用不到就可以不寫，通常我們只會用到幾個常用的。

2. 極簡形式

先說說最最簡單的一種方式，看了絕對不懵圈的那種：

animation: name duration;

翻譯如下：

animation: 定義過的動畫名 動畫時長;

實例演示

預覽復制

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 定義動畫：動畫名(change-color) */ 
    @keyframes change-color {
      from /* 0% */ { color: red } /* 紅 */
      16% { color: orange } /* 橙 */
      32% { color: yellow } /* 黃 */
      48% { color: green } /* 綠 */
      64% { color: cyan } /* 青 */
      80% { color: blue } /* 藍 */
      to /* 100% */ { color: purple } /* 紫 */
    }

    .animate {
      width: 300px;
      height: 100px;
      
      /* 再使用預先定義好的動畫 */
      animation: change-color 10s;
      /* 動畫：動畫名(change-color) 時長(10秒) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動畫：動畫名(change-color) 時長(10秒) -->
    animation: change-color 10s;
  </div>
</body>
</html>

運行案例點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

圖片描述

可以看出整段文字按照咱們定義的 change-color 動畫來運行：赤橙黃綠青藍紫一共十秒，但十秒過后字變黑了，因為這段字默認的顏色本來就是黑色的。

3. 無限循環(huán)

如果我們不想讓它結(jié)束，那就十秒過后再來十秒，十秒完再十秒，無限重復、無限循環(huán)：

animation: name duration iteration-count;

翻譯過來就是：

animation: 定義過的動畫名 動畫時長 動畫次數(shù);

實例演示

預覽復制

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動畫，動畫名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red } /* 紅 */
      16% { color: orange } /* 橙 */
      32% { color: yellow } /* 黃 */
      48% { color: green } /* 綠 */
      64% { color: cyan } /* 青 */
      80% { color: blue } /* 藍 */
      to /* 100% */ { color: purple } /* 紫 */
    }

    .animate {
      width: 400px;
      height: 100px;
      
      /* 再使用預先定義好的動畫 */
      animation: change-color 10s infinite;
      /* 動畫：動畫名(change-color) 時長(10秒) 動畫次數(shù)(無限) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動畫：動畫名(change-color) 時長(10秒) 動畫次數(shù)(無限) -->
    animation: change-color 10s infinite;
  </div>
</body>
</html>

運行案例點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

圖片描述

運行次數(shù)可以寫具體的數(shù)字，動畫會根據(jù)你寫的數(shù)字來運行相應的次數(shù)，想要無限運行的話就寫infinite

雖然成功的無限循環(huán)了，但是目前看來有個缺點，那就是最后一幀紫色結(jié)束后突然就變成了第一幀的紅色，沒有任何的過渡效果。

有兩個解決方案：

1. 定義動畫的時候最后一幀再變回紅色：

實例演示

預覽復制

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動畫，動畫名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red }  /* 紅 */
      13% { color: orange } /* 橙 */
      26% { color: yellow } /* 黃 */
      39% { color: green } /* 綠 */
      52% { color: cyan } /* 青 */
      65% { color: blue } /* 藍 */
      78% { color: purple } /* 紫 */
      to /* 100% */ { color: red } /* 最后一幀和第一幀的樣式一致 */
    }

    .animate {
      width: 400px;
      height: 100px;
      
      /* 再使用預先定義好的動畫 */
      animation: change-color 6s infinite;
      /* 動畫：動畫名(change-color) 時長(6秒) 動畫次數(shù)(無限) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動畫：動畫名(change-color) 時長(6秒) 動畫次數(shù)(無限) -->
    animation: change-color 6s infinite;
  </div>
</body>
</html>

運行案例點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

圖片描述

2. 交替動畫

什么是交替動畫呢？簡單來說就是從第一幀紅到最后一幀紫運行完了之后，再從最后一幀紫到第一幀紅，然后再從紅到紫、從紫到紅，大紅大紫。

這種動畫就不用最后一幀再定義回第一幀的紅色了，直接定義從紅到紫即可。來看看語法：

animation: 定義過的動畫名 動畫時長 動畫次數(shù) 動畫方向;

實例演示

預覽復制

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動畫，動畫名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red } /* 紅 */ 
      to /* 100% */ { color: purple } /* 為了方便直接從紅到紫 */ 
    }

    .animate {
      width: 450px;
      height: 100px;
      
      /* 再使用預先定義好的動畫 */
      animation: change-color 1s infinite alternate;
      /* 動畫：動畫名(change-color) 時長(1秒) 動畫次數(shù)(無限) 動畫方向(交替運行) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動畫：動畫名(change-color) 時長(1秒) 動畫次數(shù)(無限) 動畫方向(交替運行) -->
    animation: change-color 1s infinite alternate;
  </div>
</body>
</html>

運行案例點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

圖片描述

4. 幀動畫

語法：

animation: 定義過的動畫名 動畫時長 動畫運行的方式;

動畫運行的方式要用到steps這個函數(shù)。

看起來可能有點暈，但是我們寫成英文看起來就會好很多：

animation: change-color 7s steps(10);

這里面唯一一個新鮮詞就是steps，這個steps后面要寫上小括號，括號里面就是這次動畫要按照多少幀來運行，來看個具體的案例：

實例演示

預覽復制

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動畫，動畫名叫：change-color */
    @keyframes change-color {
      from /* 0% */ { color: red } /* 紅 */
      16% { color: orange } /* 橙 */
      32% { color: yellow } /* 黃 */
      48% { color: green } /* 綠 */
      64% { color: cyan } /* 青 */
      80% { color: blue } /* 藍 */
      to /* 100% */ { color: purple } /* 紫 */
    }

    .animate {
      width: 400px;
      height: 100px;
      
      /* 再使用預先定義好的動畫 */
      animation: change-color 7s steps(1);
      /* 動畫：動畫名(change-color) 時長(7秒) 動畫運行的方式(steps(1)) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動畫：動畫名(change-color) 時長(7秒) 動畫運行的方式(steps(1)) -->
    animation: change-color 7s steps(1);
  </div>
</body>
</html>

運行案例點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

圖片描述

可以看到這就按照我們所設想的那樣：紅、橙、黃、綠、青、藍、紫……

咦？紫呢？怎么最后直接跳過紫色直接就進入黑色了呢？

原來，這里涉及到了一個幀動畫里面一個難以理解的點，在講這點之前我們先來看結(jié)論，這樣的話即使沒弄懂到底是怎么一回事也可以直接記住結(jié)論，讓動畫按照我們預先設想的那樣去運行。

4.1 非循環(huán)式幀動畫

語法：

animation: 動畫名 時長 step-end both;

來看具體案例：

實例演示

預覽復制

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動畫，動畫名叫：change-color */
    @keyframes change-color {
      from { color: red }
      16% { color: orange }
      32% { color: yellow }
      48% { color: green }
      64% { color: cyan }
      80% { color: blue }
      to { color: purple }
    }

    .animate {
      width: 450px;
      height: 100px;
      
      /* 再使用預先定義好的動畫 */
      animation: change-color 7s step-end both;
      /* 動畫：動畫名(change-color) 時長(7秒) 動畫運行的方式(step-end) 填充模式(雙向) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動畫：動畫名(change-color) 時長(7秒) 動畫運行的方式(step-end) 填充模式(雙向)-->
    animation: change-color 7s step-end both;
  </div>
</body>
</html>

運行案例點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

圖片描述

可以看到成功了，紫色出來了，而且永遠都不會再回到默認的黑色了。

這究竟是怎么一回事呢？step-end和both這兩個單詞到底是什么意思呢？

先不要著急，咱們先把結(jié)論記下來，原理放到后面講。

4.2 循環(huán)式幀動畫

語法：

animation: 動畫名 時長 step-end infinite;

除了在調(diào)用動畫的語法上最后一個單詞不一樣，其實主要區(qū)別在于定義動畫時，定義動畫的時候可以多加一幀，來看具體案例：

實例演示

預覽復制

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除瀏覽器默認邊距 */
    * { padding: 0; margin: 0; }

    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 先定義動畫，動畫名叫：change-color */
    @keyframes change-color {
      from { color: red }
      14% { color: orange }
      28% { color: yellow }
      42% { color: green }
      56% { color: cyan }
      70% { color: blue }
      84% { color: purple }
      to { color: aquamarine }
    }

    .animate {
      width: 450px;
      height: 100px;
      
      /* 再使用預先定義好的動畫 */
      animation: change-color 7s step-end infinite;
      /* 動畫：動畫名(change-color) 時長(7秒) 動畫運行的方式(step-end) 動畫次數(shù)(無限) */
    }
  </style>
</head>
<body>
  <div class="animate">
    <!-- 動畫：動畫名(change-color) 時長(7秒) 動畫運行的方式(step-end) 動畫次數(shù)(無限)-->
    animation: change-color 7s step-end infinite;
  </div>
</body>
</html>

運行案例點擊 "運行案例" 可查看在線運行效果

運行結(jié)果：

圖片描述

反正最后一幀出不來，那我們直接就在最后多加一幀不就得了，最后一幀寫什么都可以，反正最后一幀就像空氣一樣——你永遠也看不到。

5. 小結(jié)

學會了這一章，你就已經(jīng)可以實現(xiàn)一些簡單的動畫效果了，但是為什么最后一幀會消失呢？

這和 steps 函數(shù)的運行機制有關，其實它的原理并不復雜，但就是因為不符合人類的直覺導致許多人無法理解。

接下來的章節(jié)我們就來深入的理解一下這個神秘的 steps 函數(shù)。

上一節(jié)

CSS 動畫的定義

下一節(jié)

幀動畫函數(shù)steps()的解析

我要提出意見反饋

索引目錄

1. 調(diào)用動畫

2. 極簡形式

3. 無限循環(huán)

4.1 非循環(huán)式幀動畫

4.2 循環(huán)式幀動畫

5. 小結(jié)

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

掃描二維碼
關注慕課網(wǎng)微信公眾號