Czas trwania animacji to parametr określający długość efektu ruchu zastosowanego do elementu prezentacji.
Jak parametr czasu zmienia przebieg animacji
Czas trwania animacji określa, jak długo przeglądarka wykonuje przejście elementu od stanu początkowego do stanu końcowego. W arkuszach CSS wartość tę zapisuje się jako czas, na przykład 0.5s albo 300ms. Jednostka s oznacza sekundy, a ms milisekundy; jedna sekunda odpowiada 1000 milisekundom. Jeżeli dla właściwości animation-duration ustawiono 2s, pojedynczy przebieg animacji trwa dwie sekundy.
Sama długość nie określa jeszcze sposobu zmiany wartości w czasie. Za rozkład prędkości odpowiada funkcja czasowa, na przykład linear, ease, ease-in, ease-out lub ease-in-out, ustawiana przez animation-timing-function. Przy funkcji linear zmiana zachodzi ze stałą prędkością, natomiast funkcje typu ease zmieniają prędkość w trakcie przebiegu. Dwa efekty o tym samym czasie trwania mogą więc wyglądać inaczej, mimo że kończą się w tej samej chwili.
animation-duration, transition-duration i liczba powtórzeń
W CSS właściwość animation-duration dotyczy animacji zdefiniowanych zwykle za pomocą reguły @keyframes. Reguła może opisywać kilka punktów przebiegu, takich jak from, to albo wartości procentowe. Czas trwania odnosi się do jednego cyklu. Liczbę cykli ustala animation-iteration-count; wartość 1 oznacza jeden przebieg, a infinite powtarzanie bez określonego końca. Przy dwóch cyklach i czasie 1s całkowity czas samej animacji wynosi dwie sekundy, z pominięciem ewentualnych opóźnień.
Inny mechanizm stosuje właściwość transition-duration. Przejście CSS uruchamia się wtedy, gdy zmienia się wartość właściwości, na przykład podczas użycia selektora :hover albo po dodaniu klasy przez JavaScript. Wartość transition-duration: 400ms określa czas przejścia między aktualną i nową wartością. Opóźnienie ustawia osobno transition-delay, dlatego całkowity czas oczekiwania użytkownika może być dłuższy niż sam ruch. Nie każda właściwość CSS może być płynnie interpolowana; przykładowo zmiana wartości właściwości o charakterze skokowym nie tworzy zwykłego przejścia ciągłego.
Wpływ czasu animacji na renderowanie i dostępność
Przeglądarka oblicza kolejne pośrednie wartości animowanych właściwości podczas renderowania strony. Animowanie właściwości takich jak transform i opacity zwykle ogranicza zakres zmian układu dokumentu, podczas gdy animowanie właściwości wpływających na geometrię, na przykład width, height lub top, może powodować dodatkowe obliczenia układu i malowania. Samo wydłużenie czasu nie gwarantuje płynności. Jeżeli główna pętla przeglądarki jest przeciążona, klatki mogą być pomijane, a ruch będzie postrzegany jako nierówny.
W interfejsach trzeba również uwzględnić ustawienie użytkownika prefers-reduced-motion. Media query @media (prefers-reduced-motion: reduce) pozwala skrócić lub wyłączyć efekty ruchu dla osób, które ograniczają animacje w systemie operacyjnym. Nie powinno się bezrefleksyjnie zastępować każdej animacji wartością zerową, jeżeli ruch przekazuje informację o zmianie stanu. Często właściwe jest skrócenie czasu, usunięcie efektu przesuwania i pozostawienie prostego zanikania albo zmiany koloru. Przy wyborze wartości należy sprawdzić także opóźnienie, liczbę powtórzeń i zachowanie animacji po zakończeniu.
Sprawdzanie czasu animacji w przeglądarce i podczas naprawy komputera
W narzędziach deweloperskich przeglądarki można zaznaczyć element i sprawdzić w panelu stylów, czy czas pochodzi z animation-duration, transition-duration, animacji biblioteki JavaScript czy z reguły nadpisanej przez bardziej szczegółowy selektor. Warto zweryfikować jednostkę, wartość obliczoną, animation-delay, animation-iteration-count oraz stan animation-play-state. Jeżeli element porusza się zbyt wolno, przyczyną może być nie tylko zbyt duży czas trwania, ale również opóźnienie lub nieskończone powtarzanie. Jeżeli efekt nie działa wcale, należy sprawdzić, czy czas nie ma wartości 0s, czy nazwa animacji istnieje i czy zmieniana właściwość jest animowalna.
Na poziomie JavaScript interfejs Web Animations API umożliwia odczyt i zmianę czasu przez obiekt animacji, między innymi za pomocą właściwości effect i parametrów efektu. Przeglądarka może też raportować zakończenie animacji przez zdarzenie animationend albo zdarzenie związane z zakończeniem przejścia. Przy diagnozowaniu problemu trzeba odróżnić błąd konfiguracji strony od problemu z wydajnością komputera: jeśli wartość czasu jest prawidłowa, ale klatki są gubione, należy sprawdzić obciążenie procesora, układu graficznego, pamięci oraz aktualność sterownika. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i ich podzespołów, w tym diagnostyką problemów z płynnością obrazu oraz działaniem oprogramowania.
