亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

1. 開場白

入門了動畫以后，就來看看應該如何在網頁中寫出一個動畫吧！

萬丈高樓平地起，學會了基礎語法就可以充分發揮自己的想象力，做出各種千奇百怪的動畫效果啦！

2. 動畫的定義

如果學過一些編程語言的同學會知道，有一個詞叫做變量，這個變量通常是需要事先定義好才能夠去使用。CSS 動畫也是同理，需要先定義，才能夠去使用。接下來我們就來看看該如何定義一個 CSS 動畫：

 @keyframes 動畫名 {

 ?動畫內容

 }

@keyframes 是一個固定的寫法，表示要定義一個動畫，后面要空一格再寫你的動畫名，然后大括號里面再寫上對應的動畫內容。

學過 JavaScript 的同學（沒學過的話也沒關系，可以繼續往下看）可以把 @keyframes 理解為 JS 中的 var，就相當于定義了一個變量。

大括號里面寫的可以是百分比，百分比后面的大括號里面就是你自己想要的 CSS 樣式啦！假如我們定義一個名為 change-color 的動畫：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>@keyframes</title>
  <style>
    /* 先定義一個名為change-color的動畫 */
    @keyframes change-color {
      0% { color: red } /* 紅 */
      16% { color: orange } /* 橙 */
      32% { color: yellow } /* 黃 */
      48% { color: green } /* 綠 */
      64% { color: cyan } /* 青 */
      80% { color: blue } /* 藍 */
      100% { color: purple } /* 紫 */
    }
  </style>
</head>
<body>
  
</body>
</html>

TIPS：0% 可以寫成 from，100% 可以寫成 to，效果完全一致，只是一個別名。

我們按照紅橙黃綠青藍紫的這么一個彩虹顏色順序定義了一個名為 change-color 的動畫，但是此時卻沒有任何的效果，這是因為目前僅僅只是定義了這個動畫，并沒有去指定哪個元素會用到這個動畫，以及該如何使用這個動畫。那么接下來就讓我一起來看看該如何使用這個動畫吧！

3. 小結

光學會如何定義動畫還夠，必須要學會調用動畫才能夠讓動畫真正的運行起來。

那么趕緊翻到下一頁讓我們一起看看如何調用動畫吧。