Właściwość CSSPrzejścia
transition-duration
Ustala, jak długo trwa przejście.
- Wartość domyślna
0s- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.transitionDuration = "300ms"
Przykład
#CSS
.menu {
transition-property: opacity, transform;
transition-duration: 150ms, 300ms;
}HTML przykładu
<p style="margin: 0; color: #a3a3a3;">Przezroczystość zmienia się w 150 ms, a przesunięcie w 300 ms.</p>Podgląd
Definicja i zastosowanie
#Właściwość transition-duration określa czas przejścia w sekundach (s) lub milisekundach (ms). Domyślne 0s oznacza brak animacji, więc bez tej wartości przejście w ogóle nie zadziała.
Możesz podać listę czasów po przecinku, przypisaną kolejno do właściwości z transition-property.
Dobierz czas do odległości i wagi zmiany: drobne zmiany koloru potrzebują około 150 ms, przesunięcia większych paneli 250–400 ms.
Składnia
#Składnia
transition-duration: <czas> [, <czas>]*;Wartości
#Wartości w praktyce
#0s
Natychmiastowa zmiana.
.demo { transition-duration: 0s; }150ms
Bardzo szybkie przejście.
.demo { transition-duration: 150ms; }0.6s
Wyraźnie widoczne, ale sprawne przejście.
.demo { transition-duration: 0.6s; }1.4s
Wolne przejście, dobrze widać cały ruch.
.demo { transition-duration: 1.4s; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Wejście elementu może trwać nieco dłużej niż jego zniknięcie. Szybkie chowanie sprawia wrażenie responsywności.
- Szanuj
prefers-reduced-motion: przy tej preferencji skróć lub wyłącz przejścia ruchu.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.