Kurs HTML

Do czego służy transition-property?

Właściwość transition-property jest kluczowym elementem definicji przejścia CSS. Służy ona do **określenia, które konkretnie właściwości CSS mają być animowane**, gdy ich wartość ulegnie zmianie.

Bez jawnego wskazania właściwości (lub użycia wartości domyślnej all), przeglądarka nie będzie wiedziała, co ma animować, i zmiana wartości nastąpi natychmiastowo.

Składnia i wartości

Właściwość transition-property przyjmuje jedną lub więcej nazw właściwości CSS, oddzielonych przecinkami, lub specjalne słowa kluczowe:

transition-property: none | all | <nazwa-właściwości> [, <nazwa-właściwości>]*;Kopiuj

• none: Żadna właściwość nie będzie animowana. Przejście nie nastąpi.
• all (wartość domyślna): Wszystkie właściwości, które mogą być animowane, będą podlegać przejściu. Jest to wygodne, ale może być mniej wydajne, jeśli zmienia się wiele właściwości, a chcemy animować tylko niektóre.
• <nazwa-właściwości>: Konkretna nazwa właściwości CSS, która ma być animowana (np. background-color, width, opacity, transform, border-radius).
• Lista nazw właściwości: Można podać wiele nazw właściwości oddzielonych przecinkami, aby animować tylko wybrane z nich.

Przykłady:

.element1 {
  /* Animuj tylko zmianę koloru tła */
  transition-property: background-color;
  transition-duration: 0.3s;
}

.element2 {
  /* Animuj zmianę szerokości i przezroczystości */
  transition-property: width, opacity;
  transition-duration: 0.5s;
}

.element3 {
  /* Animuj wszystkie możliwe do animowania właściwości (domyślne zachowanie) */
  transition-property: all;
  transition-duration: 1s;
}

.element4 {
  /* Wyłącz animację dla tego elementu */
  transition-property: none;
}
Kopiuj

Które właściwości można animować?

Jak wspomniano wcześniej, nie wszystkie właściwości CSS nadają się do animacji. Tylko te, dla których przeglądarka potrafi obliczyć stany pośrednie, mogą być płynnie animowane. Lista takich właściwości jest długa i obejmuje między innymi:

• Właściwości związane z rozmiarem i pozycją: width, height, padding, margin, border-width, top, left, right, bottom.
• Właściwości związane z wyglądem: color, background-color, border-color, opacity, box-shadow, text-shadow.
• Właściwości związane z tekstem: font-size, line-height, letter-spacing, word-spacing.
• Transformacje: transform (bardzo wydajne!).
• Filtry: filter.
• Właściwości Flexbox i Grid: np. flex-basis, order (choć animacja order może nie być płynna).

Pełną listę animowalnych właściwości można znaleźć w dokumentacji MDN (Mozilla Developer Network).

Ważne: Animowanie właściwości, które wpływają na layout strony (np. width, height, margin, padding, top, left) jest zazwyczaj mniej wydajne niż animowanie transform i opacity, ponieważ wymaga od przeglądarki przeliczenia układu strony w każdej klatce animacji.