Девочка на пляже под зонтиком, а рядом стрелка, которая становится прозрачнее, чем выше к солнцу
Иллюстрация: Кира Кустова

transition

Меняем состояние элемента плавно, а не резко.

Время чтения: 6 мин

Кратко

Скопировано

Свойство transition используется, когда нам нужно плавно изменить CSS-свойства между двумя состояниями элемента. Например, при наведении мышкой.

Пример

Скопировано
Открыть демо в новой вкладке

Подробно

Скопировано

Свойство transition это шорткат. Как, например, margin или background. Оно включает в себя несколько подсвойств:

Как записывается

Скопировано

Применить к одному свойству:

  • Порядок записи: имя свойства | длительность:
        
          
          .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>

        
        
          
        
      

Тогда можно сказать, что у кнопки есть два состояния:

  1. Базовое состояние, когда мышка не над кнопкой.
  2. Состояние при наведении курсора мыши (ховер-состояние).

Стили для двух этих состояний могут быть записаны в 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;
}

        
        
          
        
      

Стили для 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.3s) или в миллисекундах (300ms). Ноль перед точкой можно не писать (.3s).

💡 Значение свойства z-index записывается числом, но его нельзя плавно изменить никаким способом.

💡 Значение свойства 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, то скрытие и появление не будет плавным.