Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Zawód: Technik informatyk , Technik programista
Kategorie: Tworzenie stron WWW
Właściwość CSS animation-duration określa
Odpowiedzi
Informacja zwrotna
Właściwość CSS `animation-duration` dokładnie określa, ile czasu trwa jeden pełny cykl animacji – od początku do końca zdefiniowanych klatek kluczowych (`@keyframes`). Jeśli ustawisz `animation-duration: 2s;`, to przeglądarka ma 2 sekundy na przejście od stanu początkowego do końcowego w danej animacji. Moim zdaniem warto to sobie wyobrazić jak czas trwania jednego „przejścia” animacji, zanim ewentualnie zacznie się kolejny obrót, jeśli używasz `animation-iteration-count`. Technicznie jest to czas trwania pojedynczej iteracji, zgodnie ze specyfikacją CSS Animations (W3C). W praktyce wygląda to np. tak: `.box { animation-name: fadeIn; animation-duration: 1.5s; }`. Tu element będzie się „pojawiał” przez 1,5 sekundy. Jeśli dodasz `animation-iteration-count: 3;`, to ta 1,5 sekundowa animacja zostanie odtworzona trzy razy, ale sama długość pojedynczego cyklu nadal wynosi 1,5 s. Częsty dobry nawyk w front-endzie to trzymanie się krótkich, płynnych animacji, zwykle w zakresie 150–500 ms dla prostych efektów (hover, focus), a dłuższych, do 1–2 sekund, dla bardziej złożonych przejść, żeby użytkownik nie czuł się znużony. `animation-duration` przyjmuje wartości w sekundach (`s`) lub milisekundach (`ms`), np. `300ms`. Można też ustawiać różne czasy dla wielu animacji naraz, rozdzielając wartości przecinkami. Warto pamiętać, że jeśli nie podasz `animation-duration`, domyślna wartość to `0s`, czyli animacja tak naprawdę się nie odtworzy – to jeden z częstszych powodów, czemu początkującym „nie działa animacja”. Dobrą praktyką jest zawsze jawne ustawianie `animation-duration` oraz spójne używanie jednostek czasu w całym projekcie, żeby interfejs wyglądał konsekwentnie i profesjonalnie.