Что указывается в transition кроме времени анимации?

CSS transition: все свойства кроме времени

CSS transition — это сокращённое свойство для плавной анимации изменений CSS-свойств. Кроме времени анимации, оно содержит ещё три важных параметра.

Полная синтаксис transition

transition: <property> <duration> <timing-function> <delay>;

Вот все четыре компонента:

1. transition-property — какие свойства анимировать
2. transition-duration — время анимации (это то, что ты указал)
3. transition-timing-function — функция ускорения (скорость изменения)
4. transition-delay — задержка перед началом анимации

1. transition-property

Указывает, какие CSS-свойства должны быть анимированы.

/* Анимировать только одно свойство */
transition-property: opacity;

/* Анимировать несколько свойств */
transition-property: opacity, transform, color;

/* Анимировать ВСЕ изменяемые свойства */
transition-property: all;

/* Не анимировать свойства (значение по умолчанию) */
transition-property: none;

Пример:

button {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s; /* Только opacity будет анимирована */
}

button:hover {
  opacity: 0.5;          /* БУДЕТ плавно */
  transform: scale(1.1); /* НЕ будет плавно (не указана в transition) */
}

2. transition-duration

Время, за которое происходит анимация.

transition-duration: 0.3s;   /* Милисекунды: 300ms */
transition-duration: 500ms;  /* Явно в миллисекундах */

3. transition-timing-function

Функция ускорения — описывает, как меняется скорость анимации.

/* Стандартные функции */
transition-timing-function: ease;           /* Медленно -> быстро -> медленно (по умолчанию) */
transition-timing-function: linear;         /* Одинаковая скорость весь путь */
transition-timing-function: ease-in;        /* Медленное начало, быстрый конец */
transition-timing-function: ease-out;       /* Быстрое начало, медленный конец */
transition-timing-function: ease-in-out;    /* Медленное начало и конец */

/* Кубическая функция Безье для полного контроля */
transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);

/* Шаговая анимация */
transition-timing-function: steps(5);       /* 5 дискретных шагов */
transition-timing-function: step-start;     /* Скачок в начало */
transition-timing-function: step-end;       /* Скачок в конец */

Визуальное сравнение:

.box-linear {
  transition: all 1s linear;  /* Одинаковая скорость */
}

.box-ease-in {
  transition: all 1s ease-in; /* Медленное начало */
}

.box-ease-out {
  transition: all 1s ease-out; /* Быстрое начало */
}

4. transition-delay

Задержка перед началом анимации.

transition-delay: 0s;        /* Начать сразу (по умолчанию) */
transition-delay: 0.5s;      /* Ждать 500ms перед началом */
transition-delay: 200ms;     /* Явно в миллисекундах */

Пример: каскадная анимация:

ul {
  list-style: none;
}

li {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s ease-out;
}

li:nth-child(1) { transition-delay: 0.1s; }
li:nth-child(2) { transition-delay: 0.2s; }
li:nth-child(3) { transition-delay: 0.3s; }

li.visible {
  opacity: 1;
  transform: translateY(0);
}

Полный пример

/* Распространённый паттерн */
button {
  background: blue;
  color: white;
  padding: 10px 20px;
  
  /* Все свойства, 300ms, плавное начало и конец, без задержки */
  transition: all 0.3s ease-in-out;
}

button:hover {
  background: darkblue;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Или отдельные свойства с разными параметрами */
button {
  transition:
    background-color 0.3s ease,
    transform 0.2s linear,
    box-shadow 0.5s ease-out 0.1s; /* С задержкой */
}

Когда это нужно знать

• Плавность UI — правильная timing-function делает интерфейс приятнее
• Производительность — linear может быть быстрее ease для некоторых свойств
• Каскадные анимации — transition-delay создаёт красивые эффекты
• Микровзаимодействия — кнопки, хувера, загрузка данных

Заключение

transition в CSS содержит 4 параметра:

1. property — что анимировать
2. duration — как долго (это то, что ты спросил)
3. timing-function — как быстро (ускорение)
4. delay — когда начать

Правильное использование этих параметров создаёт гладкие, естественные анимации, которые улучшают UX.