Плавные переходы / Задержка перехода, transition-delay [4/29]
×

Задержка перехода, transition-delay [4/29]

Ещё одно свойство переходов — transition-delay. Оно определяет задержку перед началом перехода и задаётся в секундах или миллисекундах, как и transition-duration.

С ним всё просто. Разберёмся на примере.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Задержка перехода, transition-delay</title> <meta charset="utf-8"> <base href="/assets/course84/"> <link href="material.css" rel="stylesheet"> </head> <body class="theory-theme"> <button class="fab fab-play">&#58884;</button> <div class="squares"> <span class="square"></span> <span class="square"></span> <span class="square"></span> <span class="square"></span> </div> </body> </html>
CSS
.square-active { transform: scale(0); } .square { } .square:nth-child(1) { } .square:nth-child(2) { } .square:nth-child(3) { } .square:nth-child(4) { }
HTML Academy
  1. Квадратам .square задайте плавный переход для свойства transform длительностью transition-duration: 500ms,
  2. Первому квадрату задайте задержку перехода transition-delay: 50ms, а второму — 100ms,
  3. затем третьему квадрату задайте задержку 150ms, а четвёртому — 200ms.

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

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

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

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

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

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