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

首頁 慕課教程 雪碧圖入門教程 雪碧圖入門教程 過渡動畫和幀動畫的區(qū)別
手撕紅黑樹 · 更新于 2020-11-11

1. 開場白

上一章我們已經(jīng)了解了雪碧圖需要的基本CSS語法，那么這一章節(jié)我們將帶領大家體驗一下動畫的語法，以及不同動畫種類之間的區(qū)別。

動畫通常分為兩種形式：一種是過渡動畫、另一種是幀動畫。

2. 過渡動畫

之前我們曾經(jīng)說過，雪碧圖在幀動畫這一領域獨領風騷，那么接下來我們就來分析一下動畫領域里面常見的兩種形式：過渡動畫與幀動畫之間的區(qū)別。

首先我們來看看目前各類網(wǎng)站中最常見的一種動畫：過渡動畫

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animate-過渡動畫</title>
  <style>
    /* 清除默認樣式 */
    * { padding: 0; margin: 0; }
    
    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .animate {
      width: 100px;
      height: 100px;
      
      /* 使用預先定義好的動畫，過渡動畫 */
      animation: change-color 2s linear infinite alternate;
    }
    
    /* 定義動畫 */
    @keyframes change-color {
      from { background: yellow }
      to { background: green }
    }
  </style>
</head>
<body>
  <div class="animate"></div>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

圖片描述

可以看到盒子的顏色是從黃色慢慢過渡到綠色，所以叫過渡動畫，因為其有一個過渡的效果。

3. 幀動畫

再來看看幀動畫是什么樣的效果：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animate-幀動畫</title>
  <style>
    /* 清除默認樣式 */
    * { padding: 0; margin: 0; }
    
    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .animate {
      width: 100px;
      height: 100px;

	  /* 使用預先定義好的動畫，幀動畫 */
      animation: change-color 2s steps(5) infinite alternate;
    }

	/* 定義動畫 */
    @keyframes change-color {
      from { background: yellow }
      to { background: green }
    }
  </style>
</head>
<body>
  <div class="animate"></div>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

圖片描述

可以看到是一幀幀播放的，幀數(shù)低的時候有種卡卡的感覺，好像一下一下的分步驟從黃色變成綠色的。那我們把幀數(shù)提高一下不就看不到一卡一卡的感覺了嗎？來試試看：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animate</title>
  <style>
    /* 清除默認樣式 */
    * { padding: 0; margin: 0; }
    
    /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .animate {
      width: 100px;
      height: 100px;
      
      /* 使用預先定義好的動畫 */
      animation: change-color 2s steps(100) infinite alternate;
    }
    
    /* 定義動畫 */
    @keyframes change-color {
      from { background: yellow }
      to { background: green }
    }
  </style>
</head>
<body>
  <div class="animate"></div>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

圖片描述

雖然效果一樣了，但是怎么感覺更麻煩了呢？還要自己去指定幀數(shù)，而過渡動畫都是全自動的，幀動畫是不是不如過渡動畫呢？實際上并不是這樣的，幀動畫有著自己的適用場景。接下來我們就來探討一下何時適合幀動畫，何時又適合過渡動畫。

4. 小結

乍一看好像過渡動畫更勝一籌，但實際上他們兩個各自有各自的適用場景。

下一章我們就來看看什么樣的場景適合過渡動畫。