Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Завдання: Реалізація CSS-Анімації | Просунуті CSS-Анімації
CSS-верстка, ефекти та Sass

bookЗавдання: Реалізація CSS-Анімації

Завдання

Покращте візуальну привабливість форми авторизації, додавши анімацію до кнопки "Log in". Виконайте наступні кроки:

  1. Вкажіть правильне значення для властивості animation-name, використовуючи попередньо визначені зміни стану у правилі @keyframes з назвою colorChange.
  2. Встановіть функцію часу на linear, щоб забезпечити рівномірну швидкість анімації.
  3. Задайте тривалість анімації 6000ms.
  4. Налаштуйте анімацію на безперервне повторення, встановивши значення infinite.
index.html

index.html

index.css

index.css

copy
  1. Вкажіть ім'я правила @keyframes як значення для властивості animation-name.
  2. Задайте linear як значення для властивості animation-timing-function, щоб забезпечити постійну швидкість.
  3. Встановіть властивість animation-duration на 6000ms, щоб визначити тривалість анімації.
  4. Використайте infinite як значення для властивості animation-iteration-count, щоб анімація повторювалася нескінченно.
index.html

index.html

index.css

index.css

copy

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 6

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

What should the CSS code look like for the "Log in" button animation?

Can you explain how the @keyframes rule named colorChange should be defined?

Where exactly should I add these animation properties in my CSS?

bookЗавдання: Реалізація CSS-Анімації

Свайпніть щоб показати меню

Завдання

Покращте візуальну привабливість форми авторизації, додавши анімацію до кнопки "Log in". Виконайте наступні кроки:

  1. Вкажіть правильне значення для властивості animation-name, використовуючи попередньо визначені зміни стану у правилі @keyframes з назвою colorChange.
  2. Встановіть функцію часу на linear, щоб забезпечити рівномірну швидкість анімації.
  3. Задайте тривалість анімації 6000ms.
  4. Налаштуйте анімацію на безперервне повторення, встановивши значення infinite.
index.html

index.html

index.css

index.css

copy
  1. Вкажіть ім'я правила @keyframes як значення для властивості animation-name.
  2. Задайте linear як значення для властивості animation-timing-function, щоб забезпечити постійну швидкість.
  3. Встановіть властивість animation-duration на 6000ms, щоб визначити тривалість анімації.
  4. Використайте infinite як значення для властивості animation-iteration-count, щоб анімація повторювалася нескінченно.
index.html

index.html

index.css

index.css

copy

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 4. Розділ 6
some-alt