3.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a7367417b2b2512adf	瞭解 CSS 的關鍵幀和動畫是如何工作的	0	https://scrimba.com/c/cakprhv	301059	learn-how-the-css-keyframes-and-animation-properties-work

--description--

如果要給元素添加動畫，你需要了解 animation 屬性以及 @keyframes 規則。 animation 屬性控制動畫的外觀，@keyframes 規則控制動畫中各階段的變化。總共有 8 個 animation 屬性。爲了便於理解，本挑戰中我們只會暫時涉及到兩個最常用的屬性。

animation-name 用來設置動畫的名稱，也就是我們稍後要在 @keyframes 裏用到的名稱。

animation-duration 設置動畫所花費的時間。

@keyframes 可以通過設置特定時間點的行爲來創建動畫。爲此，我們只需要給持續時間內的特定幀（從 0% 到 100%）加上 CSS 規則。如果用一部電影來做類比，那麼 CSS 裏面的 0% 關鍵幀就像是電影裏面的開場鏡頭；100% 關鍵幀就像是電影裏的片尾，就是那個之後會出現演職人員列表的片尾。在動畫設定的時間內，CSS 會根據關鍵幀的規則來給元素添加動畫效果。 100% 位置的 CSS 屬性就是元素最後的樣子，相當於電影裏的演職員表或者鳴謝鏡頭。然後CSS 應用魔法來在給定的時間內轉換元素以使其脫離場景。下面舉例說明 @keyframes 和動畫屬性的用法：

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

id 爲 anim 的元素，我們在代碼中將它的 animation-name 設置爲 colorful，同時設置 animation-duration 爲 3 秒。然後我們把 @keyframes 規則添加到名爲 colorful 的動畫屬性上。在動畫開始時（0%）的背景顏色爲藍色，在動畫結束時（100%）的背景顏色爲黃色。注意我們不只可以設置開始和結束，而是從 0% 到 100% 間的任意位置都可以設置。

--instructions--

給 id 爲 rect 的元素添加動畫，設置其 animation-name 爲 rainbow，設置其 animation-duration 爲 4 秒。然後聲明 @keyframes 規則，設置動畫開始時（0%）的 background-color 爲藍色，動畫中間時（50%）爲綠色，動畫結束時（100%）爲爲黃色。

--hints--

id 爲 rect 的元素應該有一個值爲 rainbow 的 animation-name 屬性。

assert($('#rect').css('animation-name') == 'rainbow');

id 爲 rect 的元素應該有一個值爲 4s 的 animation-duration 屬性。

assert($('#rect').css('animation-duration') == '4s');

@keyframes 規則的 animation-name 應爲 rainbow。

assert(code.match(/@keyframes\s+?rainbow\s*?{/g));

@keyframes 規則的 rainbow 在 0% 時的 background-color 應爲 blue。

assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));

@keyframes 規則的 rainbow 在 50% 時的 background-color 應爲 green。

assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));

@keyframes 規則的 rainbow 在 100% 時的 background-color 應爲 yellow。

assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));

--seed--

--seed-contents--

<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
  }

  #rect {


  }




</style>
<div id="rect"></div>

--solutions--

<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
  }

  #rect {
    animation-name: rainbow;
    animation-duration: 4s;
  }

  @keyframes rainbow {
    0% {
      background-color: blue;
    }
    50% {
      background-color: green;
    }
    100% {
      background-color: yellow;
    }
  }
</style>
<div id="rect"></div>

3.9 KiB Raw Blame History Unescape Escape