freeCodeCamp/curriculum/challenges/ukrainian/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78a7367417b2b2512adf	Дізнайтеся, як працюють CSS @keyframames і властивості анімації	0	https://scrimba.com/c/cakprhv	301059	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 та властивостей анімації:

#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.

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

Елемент з id rect повинен мати animation-duration 4 секунд.

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

Правило @keyframes повинно використовувати animation-name rainbow.

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

Правило @keyframes повинно використовувати для rainbow blue background-color при 0%.

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

Правило @keyframes повинно використовувати для rainbow green background-color при 50%.

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

Правило @keyframes повинно використовувати для rainbow yellow background-color при 100%.

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>