Właściwość CSSAnimacje
animation-duration
Ustala, jak długo trwa jeden cykl animacji.
- Wartość domyślna
0s- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy oraz pseudoelementy ::before i ::after
- JavaScript
element.style.animationDuration = "2s"
Przykład
#CSS
.progress {
animation: fill 2.5s ease-out forwards;
}
@keyframes fill {
from { width: 0; }
to { width: 72%; }
}HTML przykładu
<style>@keyframes fill-bar { from { width: 0; } to { width: 72%; } }</style>
<div style="height: 10px; background: #262626; border-radius: 99px; overflow: hidden;">
<div style="height: 100%; background: linear-gradient(90deg, #7c3aed, #0ea5e9); animation: fill-bar 2.5s ease-out forwards;"></div>
</div>Podgląd
Definicja i zastosowanie
#Właściwość animation-duration określa czas jednego przebiegu animacji, od pierwszej do ostatniej klatki kluczowej. Podajesz go w sekundach lub milisekundach.
Domyślnie czas wynosi zero, więc animacja z samą nazwą nie będzie widoczna. To najczęstszy powód, dla którego animacja „nie działa”.
Przy wielu powtórzeniach cały czas animacji to czas trwania pomnożony przez liczbę powtórzeń. Opóźnienie liczy się tylko raz, przed pierwszym cyklem.
Składnia
#Składnia
animation-duration: <czas> [, <czas>]*;Wartości
#Wartości w praktyce
#0.4s
Szybki ruch w tę i z powrotem.
.demo { animation-duration: 0.4s; }1.5s
Umiarkowane tempo.
.demo { animation-duration: 1.5s; }4s
Powolny, spokojny ruch.
.demo { animation-duration: 4s; }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
#- Jeśli animacja nie rusza, sprawdź najpierw, czy ma czas trwania większy od zera.
- Efekty wejścia elementów zwykle trwają 300–600 ms. Dłuższe opóźniają dostęp do treści.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.