animation
Skrót ustawiający wszystkie parametry animacji opartej na @keyframes.
- Wartość domyślna
none 0s ease 0s 1 normal none running- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.animation = "pulse 1.5s infinite"
Przykład
#.spinner {
width: 32px;
height: 32px;
border: 3px solid #333;
border-top-color: #a78bfa;
border-radius: 50%;
animation: spin 0.9s linear infinite;
}
@keyframes spin {
to { rotate: 360deg; }
}<style>@keyframes spin-r { to { rotate: 360deg; } }</style>
<div style="display: flex; align-items: center; gap: 12px;">
<div style="width: 32px; height: 32px; border: 3px solid #333; border-top-color: #a78bfa; border-radius: 50%; animation: spin-r .9s linear infinite;"></div>
<span>Ładowanie lekcji…</span>
</div>Definicja i zastosowanie
#Właściwość animation łączy w jednej deklaracji nazwę klatek kluczowych, czas trwania, funkcję czasu, opóźnienie, liczbę powtórzeń, kierunek, tryb wypełnienia i stan odtwarzania. Typowy zapis: animation: pulse 1.5s ease-in-out infinite.
W odróżnieniu od przejść animacja nie potrzebuje zmiany stanu. Rusza od razu po nadaniu reguły i może się zapętlać, dlatego sprawdza się przy wskaźnikach ładowania, pulsujących przyciskach i efektach wejścia.
Kolejność wartości jest dość swobodna, ale pierwszy czas zawsze oznacza czas trwania, a drugi opóźnienie. Kilka animacji rozdzielasz przecinkami.
Składnia
#animation: <nazwa> <czas> <funkcja czasu>? <opóźnienie>? <powtórzenia>? <kierunek>? <wypełnienie>? <stan>?;Wartości
#pulse 1.2s ease-in-out infinite
Pulsowanie w nieskończonej pętli.- Stały obrót, jak wskaźnik ładowania.
- Podskakiwanie.
spin 3s linear infinite, pulse 1s infinite
dwie animacje
Dwie animacje naraz. Obie zmieniają transform, więc wygrywa ostatnia.
Wartości w praktyce
#pulse 1.2s ease-in-out infinite
.demo { animation: pulse 1.2s ease-in-out infinite; }spin 2s linear infinite
.demo { animation: spin 2s linear infinite; }bounce 0.8s ease-out infinite
.demo { animation: bounce 0.8s ease-out infinite; }spin 3s linear infinite, pulse 1s infinite
.demo { animation: spin 3s linear infinite, pulse 1s infinite; }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
#- Zapętlone animacje ogranicz do elementów, które naprawdę tego potrzebują, jak wskaźniki ładowania. Ciągły ruch rozprasza.
- Użytkownicy z ustawieniem
prefers-reduced-motion: reducepowinni dostać wersję bez ruchu lub z ograniczonym ruchem.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.