Кратко
СкопированоСвойство 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>
<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.
💡 По возможности старайтесь не использовать слово all для описания перехода (transition). Да, это проще на первоначальном этапе, но позже из-за этого в какой-то момент могут начать плавно изменяться свойства, которые не должны этого делать. Ну и вообще, когда браузер встречает слово all, он начинает перебирать каждое свойство элемента в поисках необходимого. Это ненужная нагрузка.
💡 Старайтесь использовать для анимации в первую очередь свойства transform и opacity — они самые производительные, потому что не приводят к перезапуску процессов Layout и Paint. Изменяйте свойства left, top, inset, margin, padding, width, inline, height, block и прочие с осторожностью, только когда без этого никак не обойтись.
Особенности
Скопировано💡 Вторым состоянием необязательно должно быть состояние при наведении. Это может быть состояние :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;
}
Стили для hover-состояния:
.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) или в миллисекундах (300ms). Ноль перед точкой можно не писать (.3s).
💡 Значение свойства z записывается числом, но его нельзя плавно изменить никаким способом.
💡 Значение свойства visibility записывается строкой, но его в связке с opacity можно плавно изменять при помощи transition.
💡 Кроме использования для изменения внешнего вида элемента, transition прекрасно подходит для решения задач с появлением элементов. Например, при реализации тултипов или всплывающих меню:
<div> <h2>Fade in</h2> <div class="tooltip-cnt"> <span class="tooltip-target">Наведи на меня</span> <div class="tooltip">Эта подсказка проявилась</div> </div></div><div class="transitioned"> <h2>Slide up</h2> <div class="tooltip-cnt"> <span class="tooltip-target">Наведи на меня</span> <div class="tooltip">Это подсказка, которая всплыла</div> </div></div>
<div>
<h2>Fade in</h2>
<div class="tooltip-cnt">
<span class="tooltip-target">Наведи на меня</span>
<div class="tooltip">Эта подсказка проявилась</div>
</div>
</div>
<div class="transitioned">
<h2>Slide up</h2>
<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, то скрытие и появление не будет плавным.