Плавные переходы / Длительность перехода, шаг 2 [2/29]
×

Длительность перехода, шаг 2 [2/29]

Плавные переходы и анимацию можно применить только к некоторым CSS-свойствам. В основном это свойства, изменяющие размер, цвет, позицию элементов. В статье на MDN приведен перечень анимируемых свойств и характер их анимирования.

Если задана только длительность перехода transition-duration, то по умолчанию плавное изменение затрагивает все свойства элемента и для всех свойств происходит одновременно.

Давайте попробуем задать кнопке ещё несколько свойств и посмотрим, как они будут изменяться.

В этом и следующих примерах используются CSS-трансформации, которые подробно разбираются в курсе «Двумерные трансформации».

Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Длительность перехода, шаг 2</title> <meta charset="utf-8"> <base href="/assets/course84/"> <link href="material.css" rel="stylesheet"> </head> <body class="theory-theme"> <button class="btn">&#58883;</button> </body> </html>
CSS
.btn { transition-duration: 1s; background-color: #ffffff; } .btn-active { background-color: #ff5252; }
HTML Academy
  1. Активному состоянию кнопки .btn-active задайте цвет текста #ffffff и поворот transform: rotate(45deg),
  2. а затем измените у кнопки .btn длительность перехода transition-duration на 200ms.

Нажимайте на кнопку .btn в мини-браузере, чтобы переключать у неё класс btn-active и увидеть плавный переход.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.