Плавные переходы / transition-property: какие свойства изменять плавно? [3/29]
×

transition-property: какие свойства изменять плавно? [3/29]

По умолчанию плавный переход действует на все анимируемые свойства элемента. Такое поведение соответствует значению all свойства transition-property, это значение по умолчанию.

Такое поведение часто нежелательно, особенно когда в правиле много свойств.

Можно указать, какие именно свойства нужно изменять плавно, перечислив их в transition-property через запятую:

transition-property: width;         // плавно меняется только ширина
transition-property: width, height; // плавно меняются только ширина и высота

При этом так же через запятую можно задавать переходам разных свойств разную длительность:

transition-property: width, height;
transition-duration: 1s, 5s; // ширина меняется за 1 секунду, высота за 5

Попробуем применить описанное свойство на практике. В этом примере у кнопки анимируются свойства background-color, transform и font-size.

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

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>transition-property: какие свойства изменять плавно?</title> <meta charset="utf-8"> <base href="/assets/course84/"> <link href="material.css" rel="stylesheet"> </head> <body class="theory-theme"> <button class="btn">&#58880;</button> </body> </html>
CSS
.btn { color: #ffffff; background-color: #00e676; transition-duration: 1s; transition-property: all; } .btn-active { font-size: 60px; background-color: #ff5252; transform: rotate(180deg); }
HTML Academy
  1. Кнопке .btn задайте плавный переход только для свойства background-color,
  2. потом задайте плавный переход только для свойства transform,
  3. а затем — для обоих свойств одновременно background-color, transform.
  4. Измените длительность перехода для .btn на 1s, 3s.

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

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

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

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

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

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