transition
Свойство transition используется, когда нам нужно плавно изменить CSS-свойства между двумя состояниями элемента. Например, при наведении мышкой.
Пример
Скопировать ссылку «Пример» Скопировано
Подробно
Скопировать ссылку «Подробно» Скопировано
Свойство transition это шорткат. Как, например, margin или background . Оно включает в себя несколько подсвойств:
- transition — property — указываем свойство, которое хотим плавно изменить;
- transition — duration — длительность перехода;
- transition — timing — function — функция, описывающая скорость изменения свойства;
- transition — delay — задержка перед началом изменения.
Как записывается
Скопировать ссылку «Как записывается» Скопировано
Применить к одному свойству:
.selector transition: transform 4s;>.selector transition: transform 4s; >
.selector transition: transform 4s 1s;>.selector transition: transform 4s 1s; >
.selector transition: transform 4s ease-in-out 1s;>.selector transition: transform 4s ease-in-out 1s; >
Применить к двум свойствам:
.selector transition: transform 4s, color 1s;>.selector transition: transform 4s, color 1s; >
Применить ко всем свойствам, которые будут меняться:
.selector transition: all 0.5s ease-out;>.selector transition: all 0.5s ease-out; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Предположим, у нас есть кнопка, у которой мы хотим изменить фон при наведении мышкой.
button class="button">Кнопкаbutton>
Тогда можно сказать, что у кнопки есть два состояния:
- Базовое состояние, когда мышка не над кнопкой.
- Состояние при наведении курсора мыши (ховер-состояние).
Стили для двух этих состояний могут быть записаны в CSS вот так 👇
Стили для базового состояния:
.button background-color: blue;>.button background-color: blue; >
.button:hover background-color: white;>.button:hover background-color: white; >
Чтобы при наведении фон кнопки изменялся не скачком, а плавно, мы используем свойство transition для плавного изменения цвета фона.
Стили для базового состояния:
.button background-color: blue; transition: background-color 0.6s;>.button background-color: blue; transition: background-color 0.6s; >
.button:hover background-color: white;>.button:hover background-color: white; >
Если мы хотим плавно изменить два и более свойств, нужно просто перечислить их через запятую.
Стили для базового состояния:
.button background-color: pink; transition: background-color 0.6s, transform 0.5s;>.button background-color: pink; transition: background-color 0.6s, transform 0.5s; >
.button:hover background-color: white; transform: scale(110%);>.button:hover background-color: white; transform: scale(110%); >
Не забывай о том, что вместе с изменяемым свойством обязательно должна указываться длительность изменения ( .5s ).
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Обратите внимание, что свойство transition мы задали в стилях для базового состояния. Таким образом, мы заранее говорим браузеру, какое свойство должно изменяться плавно.
💡 С помощью transition можно плавно изменять любое свойство, у которого значение записывается с помощью чисел (например, margin ). Исключения: visibility , z — index .
💡 По возможности старайтесь не использовать слово all для описания перехода ( transition : all . 3s ). Да, это проще на первоначальном этапе, но позже из-за этого в какой-то момент могут начать плавно изменяться свойства, которые не должны этого делать. Ну и вообще, когда браузер встречает слово all , он начинает перебирать каждое свойство элемента в поисках необходимого. Это ненужная нагрузка.
💡 Старайтесь использовать для анимации в первую очередь свойства transform и opacity — они самые производительные, потому что не приводят к перезапуску процессов Layout и Paint. Изменяйте свойства left , top , inset , margin , padding , width , inline — size , height , block — size и прочие с осторожностью, только когда без этого никак не обойтись.
Особенности
Скопировать ссылку «Особенности» Скопировано
💡 Вторым состоянием необязательно должно быть состояние при наведении. Это может быть состояние :focus , :active , :checked или, например, появление дополнительного класса.
💡 Мы можем настроить transition таким образом, что при изменении состояния переход будет выполняться с одной скоростью, а при обратном изменении состояния — с другой.
Стили для базового состояния:
.button background-color: pink; transition: background-color 0.3s, transform 0.2s;>.button background-color: pink; transition: background-color 0.3s, transform 0.2s; >
.button:hover background-color: white; transform: scale(110%); transition: background-color 3s, transform 2.5s;>.button:hover background-color: white; transform: scale(110%); transition: background-color 3s, transform 2.5s; >
Обратите внимание, в этом случае свойство transition задаётся для обоих состояний.
💡 Длительность перехода может задаваться в секундах ( 0 . 3s ) или в миллисекундах ( 300ms ). Ноль перед точкой можно не писать ( .3s ).
💡 Значение свойства z — index записывается числом, но его нельзя плавно изменить никаким способом.
💡 Значение свойства visibility записывается строкой, но его в связке с opacity можно плавно изменять при помощи transition .
💡 Кроме использования для изменения внешнего вида элемента, transition прекрасно подходит для решения задач с появлением элементов. Например, при реализации тултипов или всплывающих меню:
Fade in
Наведи на меняЭта подсказка проявиласьSlide up
Наведи на меняЭто подсказка, которая всплылаdiv> h2>Fade inh2> div class="tooltip-cnt"> span class="tooltip-target">Наведи на меняspan> div class="tooltip">Эта подсказка проявиласьdiv> div> div> div class="transitioned"> h2>Slide uph2> div class="tooltip-cnt"> span class="tooltip-target">Наведи на меняspan> div class="tooltip">Это подсказка, которая всплылаdiv> div> div>
.tooltip-cnt position: relative;> .tooltip position: absolute; /* Описываем переход */ transition: opacity 0.4s, visibility 0.4s, transform 0.4s; /* Прячем элемент */ opacity: 0; visibility: hidden;> .transitioned .tooltip /* Второй тултип еще опускаем вниз */ transform: translateY(20px);> .tooltip-target:hover + .tooltip opacity: 1; visibility: visible;> .transitioned .tooltip-target:hover + .tooltip /* Поднимаем второй тултип обратно вверх при появлении */ transform: translateY(0);>.tooltip-cnt position: relative; > .tooltip position: absolute; /* Описываем переход */ transition: opacity 0.4s, visibility 0.4s, transform 0.4s; /* Прячем элемент */ opacity: 0; visibility: hidden; > .transitioned .tooltip /* Второй тултип еще опускаем вниз */ transform: translateY(20px); > .tooltip-target:hover + .tooltip opacity: 1; visibility: visible; > .transitioned .tooltip-target:hover + .tooltip /* Поднимаем второй тултип обратно вверх при появлении */ transform: translateY(0); >
Обратите внимание, что мы прописали visibility как одно из свойств, которое нужно плавно изменить. Это работает в связке с opacity и обеспечивает возможность плавного появления и скрытия элемента:
.tooltip transition: opacity 0.4s, visibility 0.4s;>.tooltip transition: opacity 0.4s, visibility 0.4s; >
Если использовать только opacity , то элемент станет невидимым, но будет доступен для взаимодействия с мышкой и клавиатурой.
Если использовать только visibility , то скрытие и появление не будет плавным.
transition — delay
Если нужно плавно изменить какое-то CSS-свойство, но запустить изменение не сразу, а с задержкой, то используем transition — delay .
Пример
Скопировать ссылку «Пример» Скопировано
Анимация будет запущена через 0.3 секунды:
.box transition-property: color, padding; transition-duration: .3s; transition-delay: .3s;>.box transition-property: color, padding; transition-duration: .3s; transition-delay: .3s; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
.selector transition-delay: 3s; /* Одно значение в секундах */ transition-delay: 2s, 4ms; /* Несколько значений в секундах и миллисекундах */>.selector transition-delay: 3s; /* Одно значение в секундах */ transition-delay: 2s, 4ms; /* Несколько значений в секундах и миллисекундах */ >
Как понять
Скопировать ссылку «Как понять» Скопировано
Синтаксически свойство полностью аналогично transition — duration , но использование их вместе помогает достичь интересных эффектов. Например, создать цепочку последовательных изменений свойств:
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡В краткой записи свойства transition свойство transition — delay стоит на третьем месте сразу после указания длительности перехода: transition : color . 3s . 5s . Использовать свойство transition — delay отдельно от сокращённой записи стоит, если переход комплексный и анимируется несколько свойств с разными задержками.
💡 Хорошо всегда помнить о том, что мы можем стилизовать плавное изменение свойства в две стороны:
- от базового состояния → к изменённому состоянию;
- от изменённого состояния → к базовому состоянию.
Поэтому важно указывать transition — delay для обоих состояний. При убирании курсор мыши сразу начнёт меняться padding, а через 500 мс — цвет текста:
.box color: red; padding: 12px; transition-property: color, padding; transition-duration: .5s, .5s; transition-delay: .5s, 0s>.box color: red; padding: 12px; transition-property: color, padding; transition-duration: .5s, .5s; transition-delay: .5s, 0s >
При наведении мыши сразу начнёт меняться цвет текста, а через 500 мс — padding :
.box:hover color: green; padding: 24px; transition-property: color, padding; transition-duration: .5s, .5s; transition-delay: 0s, .5s>.box:hover color: green; padding: 24px; transition-property: color, padding; transition-duration: .5s, .5s; transition-delay: 0s, .5s >
transition-delay
The transition-delay CSS property specifies the duration to wait before starting a property’s transition effect when its value changes.
Try it
The delay may be zero, positive, or negative:
- A value of 0s (or 0ms ) will begin the transition effect immediately.
- A positive value will delay the start of the transition effect for the given length of time.
- A negative value will begin the transition effect immediately, and partway through the effect. In other words, the effect will be animated as if it had already been running for the given length of time.
You may specify multiple delays, which is useful when transitioning multiple properties. Each delay will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer delays specified than in the master list, the list of delay values will be repeated until there are enough. If there are more delays, the list of delay values will be truncated to match the number of properties. In both cases, the CSS declaration remains valid.
Syntax
/* values */ transition-delay: 3s; transition-delay: 2s, 4ms; /* Global values */ transition-delay: inherit; transition-delay: initial; transition-delay: revert; transition-delay: revert-layer; transition-delay: unset;
Values
Denotes the amount of time to wait between a property’s value changing and the start of the transition effect.