Теперь, когда мы увидели свойство transition в деле, давайте рассмотрим свойства, входящие в состав переходов, и что они означают.
Сокращённые и полные свойства
При написании CSS часто можно свести несколько свойств к одному сокращённому. Например, padding в сокращённом виде может выглядеть следующим образом:
padding: 10px 20px 15px 25px;
Это эквивалентно:
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;
Таким же образом мы можем записать переход сокращённо:
transition: all 0.5s 1s linear;
В данном случае сокращение соответствует:
transition: [свойство] [длительность] [задержка] [функция времени];
Каждое из этих свойств может быть написано отдельно:
transition-property: all;
transition-duration: 0.5s;
transition-delay: 1s;
transition-timing-function: linear;
Рассмотрим каждое из этих свойств.
transition-property
Свойство, которое браузер будет анимировать, обычно указывается первым в сокращении. Например, для изменения фона можно использовать background. Для перехода всех применяемых стилевых свойств можно использовать значение all.
transition-duration
Значение transition-duration указывает браузеру, сколько времени займёт переход. Длительность перехода 3s (три секунды) будет в три раза дольше, чем длительность 1000ms.
transition-delay
Свойство transition-delay говорит браузеру подождать перед применением перехода. Это значение времени, которое может быть задано в секундах или миллисекундах. Например, 3s — это три секунды, а 100ms — сто миллисекунд. Аналогично это можно записать как 0.1s. Решать вам.
transition-timing-function
Как в переходах, так и в анимации используются функции времени. Их очень много, поэтому вместо того, чтобы пытаться впихнуть все их сюда, мы поговорим о них позже. Функции времени действительно могут оживить вашу анимацию.
Где переходы не работают
Хотя вы можете использовать переходы для позиционирования, размера, цвета, рамки, положения фона и многих других параметров, есть вещи, для которых переход невозможен. Переход не может быть выполнен для font-family, поскольку это означает попытку сгенерировать кадры между двумя совершенно разными изображениями шрифтов.
Фоновые изображения, созданные через CSS, например, сгенерированные градиенты, не могут иметь анимированных свойств. Это означает, что браузер будет пересоздавать фоновое изображение на каждом кадре анимации, и поэтому не поддерживается.
Однако можно анимировать такие свойства, как opacity и background-position. Перемещая фоновые изображения или скрывая их, можно создавать интересные эффекты.
В примере с Бэймаксом фоновое изображение сдвигается для создания анимации.
Источник: http://cssanimation.rocks/baymax/
Схожий эффект используется в этом эффекте блеска кнопки, где фоновый градиент анимируется вдоль кнопки.
Источник: https://cssanimation.rocks/pseudo-elements/
Домашнее задание
Я создал базовый Codepen для исследования переходов. В нём происходит переход от формы ромба к кругу. Попробуйте изменить некоторые атрибуты и посмотрите, что при этом произойдёт.
Если хотите пойти дальше, нажмите кнопку Fork и создйте свою собственную версию, после чего сможете сохранить её в своей учётной записи Codepen.