animation-name
Wskazuje, które klatki kluczowe @keyframes ma odtworzyć element.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.animationName = "slide"
Przykład
#.badge {
animation-name: pop;
animation-duration: 0.6s;
}
@keyframes pop {
from { transform: scale(0.6); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}<p><span class="badge box" style="display:inline-grid">Nowość</span></p>Definicja i zastosowanie
#Właściwość animation-name łączy element z animacją zdefiniowaną w regule @keyframes. Sama nazwa nie wystarczy: animacja ruszy dopiero wtedy, gdy ma też czas trwania (animation-duration) większy od zera.
Można podać kilka nazw po przecinku. Każda animacja działa wtedy równolegle, a pozostałe właściwości animacji (czas, opóźnienie, liczba powtórzeń) przyporządkowuje się po kolei do nazw z listy.
Jeśli nazwa nie pasuje do żadnej reguły @keyframes, nic się nie dzieje i przeglądarka nie zgłasza błędu. Warto więc sprawdzić pisownię, gdy animacja „nie działa”.
Składnia
#animation-name: none | nazwa-klatek [, nazwa-klatek]*;Wartości
#- Brak animacji. Przydaje się do wyłączenia animacji odziedziczonej z innej reguły.
nazwa-klatek
Nazwa własnej reguły@keyframes. Tu element przesuwa się w prawo i wraca.nazwa-klatek
Inna reguła@keyframes: element pulsuje i zmienia kolor.lista nazw
Dwie animacje naraz. Obie działają równolegle, a ich przekształcenia wzajemnie się nadpisują, więc wygrywa ostatnia na liście.
Wartości w praktyce
#none
.demo .box { animation-name: none; }slide
@keyframes. Tu element przesuwa się w prawo i wraca..demo .box { animation-name: slide; }pulse
@keyframes: element pulsuje i zmienia kolor..demo .box { animation-name: pulse; }slide, spin
.demo .box { animation-name: slide, spin; }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
#- Nazwy klatek kluczowych dobieraj opisowo, na przykład
fade-inczyslide-up. Łatwiej je wtedy znaleźć w arkuszu. - Szanuj ustawienie systemowe ograniczające ruch: w
@media (prefers-reduced-motion: reduce)wyłącz lub skróć animacje.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.