Плавные переходы / Длительность перехода, transition-duration [1/29]
×

Длительность перехода, transition-duration [1/29]

Плавные переходы в CSS или transitions позволяют изменять значения свойств постепенно, «с нежностью».

Обычно эффект от изменения значений CSS-свойств виден мгновенно, но с помощью плавных переходов можно изменить это поведение и сделать процесс изменения значений достаточно длительным.

В отличие от анимаций, которые позволяют управлять любым количеством промежуточных состояний, с помощью transitions можно управлять только переходом между двумя состояниями: начальным и конечным.

Чтобы обозначить плавный переход в CSS, достаточно задать одно свойство: transition-duration — длительность перехода. Значения задаются в секундах (10s, 3s), долях секунды (0.1s, 0.03s) или миллисекундах (100ms, 333ms).

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


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Длительность перехода, transition-duration</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 { background-color: #ffffff; } .btn-active { background-color: #ff5252; }
HTML Academy
  1. Кнопке .btn задайте transition-duration: 1s.

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

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

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

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

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

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