Kurs HTML

Do czego służy transition-duration?

Właściwość transition-duration określa **czas, w jakim ma się odbyć przejście** (animacja) od wartości początkowej do wartości końcowej właściwości zdefiniowanej w transition-property.

Jest to fundamentalna część definicji przejścia - bez określenia czasu trwania (lub gdy jest on równy 0), zmiana właściwości nastąpi natychmiastowo, nawet jeśli zdefiniowano transition-property.

Składnia i wartości

Właściwość transition-duration przyjmuje jedną lub więcej wartości czasu, oddzielonych przecinkami. Każda wartość odpowiada kolejnej właściwości zdefiniowanej w transition-property.

transition-duration: <czas> [, <czas>]*;Kopiuj

• <czas>: Wartość czasu określająca długość przejścia. Musi być to wartość **nieujemna**. Najczęściej używane jednostki to:
  • s (sekundy): Np. 0.5s, 2s.
  • ms (milisekundy): Np. 300ms (co jest równoważne 0.3s), 1500ms.

Wartość domyślna: Domyślną wartością dla transition-duration jest 0s, co oznacza brak przejścia (zmiana natychmiastowa).

Przykłady:

.element1 {
  transition-property: background-color;
  /* Przejście koloru tła potrwa 0.4 sekundy */
  transition-duration: 0.4s; 
}

.element2 {
  transition-property: width, opacity;
  /* Przejście szerokości potrwa 500ms, a przezroczystości 300ms */
  transition-duration: 500ms, 300ms; 
}

.element3 {
  transition-property: transform, color, border-radius;
  /* Przejście transformacji potrwa 0.3s, koloru 0.5s, a border-radius 0.3s */
  /* Jeśli lista duration jest krótsza niż property, wartości są powtarzane */
  transition-duration: 0.3s, 0.5s; 
}

.element4 {
  /* Jeśli transition-property: all, ta jedna wartość dotyczy wszystkich animowalnych właściwości */
  transition-property: all;
  transition-duration: 0.25s;
}
Kopiuj

Ważne: Jeśli lista wartości w transition-duration jest krótsza niż lista w transition-property, lista czasów trwania jest powtarzana od początku. Jeśli jest dłuższa, nadmiarowe wartości są ignorowane.

Na przykład, dla transition-property: a, b, c, d; i transition-duration: 1s, 2s;, właściwości a i c będą miały czas trwania 1s, a właściwości b i d będą miały czas trwania 2s.

Dobieranie czasu trwania

Wybór odpowiedniego czasu trwania przejścia ma duży wpływ na odczucia użytkownika:

• Zbyt krótki czas (np. < 100ms): Przejście może być niezauważalne lub sprawiać wrażenie nagłego "mignięcia".
• Zbyt długi czas (np. > 1s): Przejście może wydawać się powolne, ociężałe i irytujące dla użytkownika, który musi czekać na zakończenie animacji.
• Typowe wartości: Często stosuje się czasy trwania w zakresie od 150ms do 500ms (0.15s - 0.5s). Zapewniają one zauważalną płynność bez spowalniania interakcji.

Ostateczny wybór zależy od kontekstu, rodzaju animowanej właściwości i pożądanego efektu estetycznego. Warto eksperymentować, aby znaleźć optymalny czas.