transition vs animation
transition animuje zmianę między dwoma stanami po wyzwalaczu, np. :hover. animation odtwarza kroki z @keyframes samodzielnie, nawet w pętli.
Porównanie w tabeli
#Potrzebuje wyzwalacza (np. :hover)
- transition
- Tak, bez zmiany stanu nic się nie dzieje
- animation
- Nie, rusza sama po przypisaniu reguły
Liczba kroków
- transition
- Dwa stany: początkowy i końcowy
- animation
- Dowolnie wiele, zdefiniowanych w
@keyframes
Zapętlanie
- transition
- Niemożliwe
- animation
- Tak, przez
animation-iteration-count: infinite
Start bez interakcji użytkownika
- transition
- Nie
- animation
- Tak
Pauza i wznowienie
- transition
- Nie
- animation
- Tak, przez
animation-play-state
Typowe użycie
- transition
- Hover na przyciskach, płynne otwieranie menu
- animation
- Spinnery, pulsowanie, wskaźniki ładowania
Przykład
#.btn {
background: #7c3aed;
transition: background-color 0.2s;
}
.btn:hover {
background: #6d28d9;
}
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
to { rotate: 360deg; }
}<div class="stage" style="display: flex; gap: 16px; align-items: center;">
<button class="btn" type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; color: #fff;">Najedź na mnie</button>
<div class="spinner" style="width: 28px; height: 28px; border: 3px solid #333; border-top-color: #a78bfa; border-radius: 50%;"></div>
</div>Definicja i zastosowanie
#Właściwość transition potrzebuje wyzwalacza: zmiany stanu, na przykład :hover, dodania klasy przez JavaScript albo zmiany zapytania @media. Interpoluje tylko między dwoma wartościami, tą przed zmianą i tą po niej, i odtwarza się raz na każdą zmianę.
Właściwość animation opiera się na regule @keyframes, w której opisujesz dowolnie wiele kroków pod różnymi procentami czasu. Rusza sama, zaraz po przypisaniu reguły do elementu, bez żadnej interakcji użytkownika. Dzięki animation-iteration-count może się zapętlać, a animation-direction i animation-play-state dają kontrolę nad kierunkiem i pauzą.
W praktyce transition wystarcza do prostych efektów interfejsu: podświetlenia przycisku, otwarcia menu, zmiany koloru przy fokusie. animation sprawdza się tam, gdzie ruch ma się dziać sam z siebie i bez końca: spinnery ładowania, pulsujące odznaki, powitalne efekty wejścia elementów na stronę.
Składnia
#transition: <właściwość> <czas> <funkcja czasu>? <opóźnienie>?;
animation: <nazwa-klatek> <czas> <funkcja czasu>? <opóźnienie>? <powtórzenia>?;Więcej przykładów
#@keyframes pulse {
50% { transform: scale(1.15); }
}
.badge {
animation: pulse 1.2s ease-in-out infinite;
}<span class="box badge" style="display: inline-grid;">Nowe</span>Nie trzeba nic klikać ani najeżdżać kursorem: animacja startuje od razu po wczytaniu strony.
.card {
transform: scale(1);
transition: transform 0.3s;
}<div class="box" style="width: 220px;">Czeka na zmianę stanu, np. :hover</div>Sam transition niczego nie animuje. Potrzebuje drugiej reguły, np. :hover, która zmieni wartość transform.
Dobre praktyki
#- Jeśli coś ma się dziać bez udziału użytkownika i w pętli, sięgnij po
animation. transitionjest prostszy i lżejszy do efektów hover albo fokusu na jednej, dwóch właściwościach.- Można je połączyć: animacja wejścia z
@keyframes, a potemtransitionna:hovertego samego elementu.
Powiązane hasła
#- transitionSkrót, który sprawia, że zmiany wartości CSS następują płynnie, a nie skokowo.
- animationSkrót ustawiający wszystkie parametry animacji opartej na @keyframes.
- @keyframesDefiniuje kolejne etapy animacji, czyli klatki kluczowe.
- transformPrzesuwa, obraca, skaluje lub pochyla element bez wpływu na układ strony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.