transition-timing-function
Ustala krzywą tempa przejścia: przyspieszanie, zwalnianie lub ruch skokowy.
- Wartość domyślna
ease- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.transitionTimingFunction = "ease-out"
Przykład
#.drawer {
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}<p style="margin: 0; color: #a3a3a3;">Krzywa z szybkim startem i miękkim hamowaniem to dobry wybór dla wysuwanych paneli.</p>Definicja i zastosowanie
#Właściwość transition-timing-function decyduje, jak rozkłada się tempo zmiany w czasie. linear zmienia wartość równomiernie, ease-in zaczyna powoli i przyspiesza, ease-out zaczyna szybko i zwalnia, a ease-in-out łączy oba.
Własną krzywą opisze funkcja cubic-bezier(). Wartości poza zakresem 0–1 tworzą efekt przestrzelenia i sprężynowania. Funkcja steps() dzieli przejście na skokowe kroki, jak w animacji klatka po klatce.
Nowsza funkcja linear() pozwala zapisać dowolnie złożoną krzywą jako listę punktów, na przykład realistyczne odbicie.
Składnia
#transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | steps(…) | cubic-bezier(…) | linear(…);Wartości
#Wartości w praktyce
#ease
.demo { transition-timing-function: ease; }linear
.demo { transition-timing-function: linear; }ease-in
.demo { transition-timing-function: ease-in; }ease-out
.demo { transition-timing-function: ease-out; }steps(4)
.demo { transition-timing-function: steps(4); }cubic-bezier(.34, 1.56, .64, 1)
.demo { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }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
#- Elementy pojawiające się na ekranie zwykle wyglądają najlepiej z
ease-out, a znikające zease-in. - Krzywe do
cubic-bezier()łatwo dobrać w narzędziach deweloperskich przeglądarki, klikając ikonę przy wartości.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.