transition-property

Если нам нужно анимировать переход нескольких свойств элемента (например, цвета и размера шрифта), то удобно перечислить их в свойстве transition-property.

        
          
          .box {  transition-property: color, font-size;  transition-duration: 0.3s, 0.5s;}
          .box {
  transition-property: color, font-size;
  transition-duration: 0.3s, 0.5s;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Одно значение:

        
          
          .selector {  transition-property: color;}
          .selector {
  transition-property: color;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Несколько значений:

        
          
          .selector {  transition-property: transform, height, color;}
          .selector {
  transition-property: transform, height, color;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Анимируем всё подряд:

        
          
          .selector {  transition-property: all;}
          .selector {
  transition-property: all;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Когда нужно анимировать переход сразу нескольких свойств элемента, то лучше использовать не комплексное свойство transition, а каждое из подсвойств в отдельности. Код получится более понятным и вы не запутаетесь в длинных строчках. Сравним:

        
          
          .box {  transition: color 0.2s, transform 0.3s, padding-left 0.5s, padding-right 0.5s;}.box {  transition-property: color, transform, padding-left, padding-right;  transition-duration: 0.2s, 0.3s, 0.5s, 0.5s;}
          .box {
  transition: color 0.2s, transform 0.3s, padding-left 0.5s, padding-right 0.5s;
}

.box {
  transition-property: color, transform, padding-left, padding-right;
  transition-duration: 0.2s, 0.3s, 0.5s, 0.5s;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Во втором примере строк больше, но он выглядит понятнее и проще читается.

💡 Чтобы свойство анимировалось, не забывайте добавлять transition-duration, иначе браузер не поймёт, какой длительности должны быть переходы свойств.

💡 transition-property может принимать значение all, что говорит браузеру о том, что нужно будет плавно изменять все возможные свойства элемента. Такая запись сильно короче, но заставляет браузер выполнять лишнюю работу по проверке каждого CSS-свойства. Поэтому правилом хорошего тона считается не использовать all, а перечислить только изменяющиеся свойства.

На практике

Скопировать ссылку "На практике" Скопировано

Денис Ежков советует

Скопировать ссылку "Денис Ежков советует" Скопировано

🛠 В реальных проектах не так часто приходится плавно изменять более двух свойств одновременно, поэтому свойство transition-property используется довольно редко. В основном переходы стилизуются с использованием комплексного свойства transition.