transition
Skrót, który sprawia, że zmiany wartości CSS następują płynnie, a nie skokowo.
- Wartość domyślna
all 0s ease 0s- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.transition = "transform 0.3s ease-out"
Przykład
#.button {
background: #7c3aed;
transition: background-color 0.2s, transform 0.2s;
}
.button:hover {
background: #6d28d9;
transform: translateY(-2px);
}<style>
.hover-btn { background: #7c3aed; color: #fff; border: 0; padding: 10px 18px; border-radius: 10px; transition: background-color .2s, transform .2s; }
.hover-btn:hover { background: #6d28d9; transform: translateY(-2px); }
</style>
<button class="hover-btn" type="button">Najedź na mnie</button>Definicja i zastosowanie
#Właściwość transition łączy cztery ustawienia przejścia: którą właściwość animować (transition-property), jak długo (transition-duration), z jakim przyspieszeniem (transition-timing-function) i z jakim opóźnieniem (transition-delay).
Przejście uruchamia się samo, gdy zmieni się wartość właściwości, na przykład w stanie :hover, po dodaniu klasy przez JavaScript albo po zmianie zapytania @media. Nie potrzebujesz reguły @keyframes, wystarczą dwa stany.
Po przecinku podasz osobne przejścia dla różnych właściwości, na przykład szybkie dla koloru i wolniejsze dla przesunięcia. Najpłynniej animują się transform i opacity.
Składnia
#transition: <właściwość> <czas> <funkcja czasu>? <opóźnienie>? [, …]*;Wartości
#- Brak przejścia: zmiana następuje natychmiast.
- Wszystkie zmieniane właściwości przez 0,6 sekundy.
- Tylko przesunięcie jest płynne, kolor zmienia się skokowo.
background 0.2s, transform 1s 0.3s
kilka przejść
Szybka zmiana koloru i wolniejszy ruch z opóźnieniem.
Wartości w praktyce
#none
.demo { transition: none; }all 0.6s
.demo { transition: all 0.6s; }transform 0.8s ease-out
.demo { transition: transform 0.8s ease-out; }background 0.2s, transform 1s 0.3s
.demo { transition: background 0.2s, transform 1s 0.3s; }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
#- Unikaj
transition: all. Wymieniaj konkretne właściwości, żeby nie animować przypadkiem czegoś kosztownego. - Czasy 150–300 ms są odbierane jako szybkie i naturalne. Dłuższe przejścia w interfejsie zaczynają irytować.
Powiązane hasła
#- transition-propertyWskazuje, które właściwości CSS mają zmieniać się płynnie.
- transition-durationUstala, jak długo trwa przejście.
- transition-timing-functionUstala krzywą tempa przejścia: przyspieszanie, zwalnianie lub ruch skokowy.
- animationSkrót ustawiający wszystkie parametry animacji opartej na @keyframes.
- transformPrzesuwa, obraca, skaluje lub pochyla element bez wpływu na układ strony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.