---
id: 587d78a7367417b2b2512adf
title: Learn How the CSS @keyframes and animation Properties Work
challengeType: 0
videoUrl: ''
localeTitle: 'Узнайте, как работают CSS-файлы и анимация CSS'
---
## Description
Чтобы анимировать элемент, вам нужно знать свойства анимации и правило @keyframes
. Свойства анимации определяют, как должна себя вести анимация, и правило @keyframes
контролирует, что происходит во время этой анимации. Всего имеется восемь свойств анимации. Эта задача будет держать ее простой и охватывать две самые важные из них: animation-name
задает имя анимации, которое позже используется @keyframes
чтобы сообщить CSS, какие правила идут с анимацией. animation-duration
задает animation-duration
анимации. @keyframes
- это то, как точно указать, что происходит в анимации в течение продолжительности. Это делается путем предоставления свойств CSS для определенных «кадров» во время анимации с процентами от 0% до 100%. Если вы сравниваете это с фильмом, свойства CSS для 0% - это то, как элемент отображается в начальной сцене. Свойства CSS на 100% - это то, как элемент появляется в конце, прямо перед броском кредитов. Затем CSS применяет магию для перехода элемента за заданную продолжительность, чтобы вывести сцену. Вот пример, иллюстрирующий использование @keyframes
и свойств анимации: #anim {
анимация-имя: красочный;
продолжительность анимации: 3 с;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: желтый;
}
}
Для элемента с anim
идентификатором, фрагмент кода выше , задает animation-name
, чтобы colorful
и устанавливает animation-duration
до 3 секунд. Затем правило @keyframes
ссылается на свойства анимации с именем colorful
. Он устанавливает цвет в синий цвет в начале анимации (0%), который к концу анимации перейдет в желтый цвет (100%). Вы не ограничены только начальными переходами, вы можете установить свойства для элемента для любого процента от 0% до 100%.
## Instructions
Создайте анимацию для элемента с id rect
, установив animation-name
на радугу и animation-duration
до 4 секунд. Затем объявите правило @keyframes
и установите background-color
в начале анимации ( 0%
) на синий, середина анимации ( 50%
) на зеленый, а конец анимации ( 100%
) на желтый.
## Tests
```yml
tests:
- text: Элемент с идентификатором rect
должен иметь свойство animation-name
со значением радуги.
testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of rect
should have an animation-name
property with a value of rainbow.");'
- text: Элемент с идентификатором rect
должен иметь свойство animation-duration
со значением 4s.
testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of rect
should have an animation-duration
property with a value of 4s.");'
- text: Правило @keyframes
должно использовать animation-name
радуги.
testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The @keyframes
rule should use the animation-name
of rainbow.");'
- text: Правило @keyframes
для радуги должно использовать background-color
синего цвета при 0%.
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The @keyframes
rule for rainbow should use a background-color
of blue at 0%.");'
- text: Правило @keyframes
для радуги должно использовать зеленый background-color
на 50%.
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The @keyframes
rule for rainbow should use a background-color
of green at 50%.");'
- text: Правило @keyframes
для радуги должно использовать background-color
желтого цвета на 100%.
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The @keyframes
rule for rainbow should use a background-color
of yellow at 100%.");'
```
## Challenge Seed
## Solution
```js
// solution required
```