137 lines
5.3 KiB
Markdown
137 lines
5.3 KiB
Markdown
---
|
||
id: 587d78a7367417b2b2512adf
|
||
title: Дізнайтеся, як працюють CSS @keyframames і властивості анімації
|
||
challengeType: 0
|
||
videoUrl: 'https://scrimba.com/c/cakprhv'
|
||
forumTopicId: 301059
|
||
dashedName: learn-how-the-css-keyframes-and-animation-properties-work
|
||
---
|
||
|
||
# --description--
|
||
|
||
Щоб анімувати елемент, потрібно знати про властивості анімації і правило `@keyframes`. Властивості анімації визначають поведінку анімації і правило `@keyframes` контролює, що відбувається під час цієї анімації. Загалом, існує вісім властивостей анімації. Ми не будемо ускладнювати це завдання і розглянемо спершу дві найважливіші:
|
||
|
||
`animation-name` встановлює назву анімації, яка пізніше використовується `@keyframes`, щоб вказати CSS, які правила використовуються з якими анімаціями.
|
||
|
||
`animation-duration` встановлює тривалість анімації.
|
||
|
||
`@keyframes` це спосіб точно вказати, що відбувається в анімації протягом цієї тривалості. Це робиться надавши властивості CSS певним "кадрам" під час анімації, з відсотками в межах від 0% до 100%. Якщо порівняти це з фільмом, властивості CSS для 0% - це те, як елемент відображається на початковій сцені. Властивості CSS для 100% - це те, як цей елемент виглядає в кінці прямо саме перед тим, як починаються титри. Тоді 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` і встановіть голубий `background-color` на початку анімації (`0%`), зелений посередині анімації (`50%`) та жовтий в кінці анімації (`100%`).
|
||
|
||
# --hints--
|
||
|
||
Елемент з id `rect` повинен мати властивість `animation-name` зі значенням `rainbow`.
|
||
|
||
```js
|
||
assert($('#rect').css('animation-name') == 'rainbow');
|
||
```
|
||
|
||
Елемент з id `rect` повинен мати `animation-duration` 4 секунд.
|
||
|
||
```js
|
||
assert($('#rect').css('animation-duration') == '4s');
|
||
```
|
||
|
||
Правило `@keyframes` повинно використовувати `animation-name` `rainbow`.
|
||
|
||
```js
|
||
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||
```
|
||
|
||
Правило `@keyframes` повинно використовувати для `rainbow` `blue` `background-color` при 0%.
|
||
|
||
```js
|
||
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||
```
|
||
|
||
Правило `@keyframes` повинно використовувати для `rainbow` `green` `background-color` при 50%.
|
||
|
||
```js
|
||
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||
```
|
||
|
||
Правило `@keyframes` повинно використовувати для `rainbow` `yellow` `background-color` при 100%.
|
||
|
||
```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>
|
||
```
|