137 lines
3.9 KiB
Markdown
137 lines
3.9 KiB
Markdown
|
---
|
|||
|
|
id: 587d78a7367417b2b2512adf
|
|||
|
|
title: 瞭解 CSS 的關鍵幀和動畫是如何工作的
|
|||
|
|
challengeType: 0
|
|||
|
|
videoUrl: 'https://scrimba.com/c/cakprhv'
|
|||
|
|
forumTopicId: 301059
|
|||
|
|
dashedName: 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` 和動畫屬性的用法：
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
#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` 屬性。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('#rect').css('animation-name') == 'rainbow');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
id 爲 `rect` 的元素應該有一個值爲 4s 的 `animation-duration` 屬性。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('#rect').css('animation-duration') == '4s');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
`@keyframes` 規則的 `animation-name` 應爲 `rainbow`。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
`@keyframes` 規則的 `rainbow` 在 0% 時的 `background-color` 應爲 `blue`。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
`@keyframes` 規則的 `rainbow` 在 50% 時的 `background-color` 應爲 `green`。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
`@keyframes` 規則的 rainbow 在 100% 時的 `background-color` 應爲 `yellow`。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<style>
|
|||
|
|
div {
|
|||
|
|
height: 40px;
|
|||
|
|
width: 70%;
|
|||
|
|
background: black;
|
|||
|
|
margin: 50px auto;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#rect {
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
<div id="rect"></div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<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>
|
|||
|
|
```
|