Podczas stosowania animacji do różnych elementów CSS musisz podać niektóre klatki kluczowe dla animacji. @Keyframes Zasada określa, że element zmieni swój obecny styl na ten określony w określonych momentach. Ponadto musisz dołączyć animację do konkretnego elementu, aby animacja działała.
Istnieją różne właściwości animacji CSS, które są używane w celu dodania animacji do różnych elementów CSS, omówiliśmy te właściwości poniżej.
Właściwości animacji CSS
CSS zapewnia różne właściwości animacji, które zostały szczegółowo wyjaśnione poniżej.
nazwa animacji
Ta właściwość służy do zdefiniowania nazwy @KeyFrames.
Składnia
animacja-nazwa: Brak | Keyframename | początkowe | dziedziczyć;Keyframename Parametr definiuje nazwę dla klatki kluczowej, którą chcesz dołączyć do elementu.
Przykład
Rozważ poniższy przykład, aby zrozumieć, jak działa ta właściwość.
Html
Witaj świecie
Tutaj zdefiniowaliśmy
element, na którym zastosujemy efekt animacji.
CSS
PPrzed zastosowaniem efektu animacji najpierw ustawiliśmy rozmiar czcionki i pozycję akapitu. Później przypisaliśmy klatki kluczowe nazwa i używając reguły @KeyFrames, definiujemy, że animacja sprawi, że akapit przeniesie się z 0px do 200px od lewej.
Zauważ, że ważne jest, aby ustawić czas trwania animacji, w przeciwnym razie nie zadziała.
Wyjście
Animacja działa poprawnie.
Czas trwania animacji
Ta właściwość określa czas, w którym animacja powinna zająć, aby zakończyć jeden cykl.
Składnia
Czas trwania animacji: czas | początkowe | dziedziczyć;Parametr czasu określa czas animacji.
Przykład
Oto jak możesz ustawić czas trwania animacji.
Html
Po prostu zdefiniowaliśmy element DIV.
CSS
divOprócz stylizacji kontenera Div ustawiliśmy czas animacji na 3 sekundy. Oznacza to, że animacja będzie nadal grać przez 3 sekundy.
Wyjście
Animacja jest odtwarzana przez 3 sekundy.
animacja-opóźnienie
Ta właściwość określa okres oczekiwania przed rozpoczęciem animacji.
Składnia
Animation-Delay: Time | początkowe | dziedziczyć;Parametr czasu określa czas oczekiwania przed rozpoczęciem animacji, jednak jest opcjonalny.
Przykład
Załóżmy, że chcesz opóźnić swoją animację przez 2 sekundy, a następnie postępuj zgodnie z poniższym kodem.
CSS
divPowyższy kod określa, że kontener Div przesunie się z 0px do 200px od lewej przez 5 sekund po okresie oczekiwania na 2 sekundy.
Wyjście
Animacja była opóźniona przez 2 sekundy, a następnie rozpoczęła się zgodnie.
funkcja animacji
Ta właściwość określa krzywą przyspieszenia animacji.
Składnia
Funkcja animacji: łatwość | liniowy | łatwość | łatwość | Łatwość | Cubic-Bezier (N, N, N, N);Wszystkie parametry są wyjaśnione poniżej.
Przykład
Poniższy przykład pokazuje parametr łatwości omawianej nieruchomości.
CSS
divUstawiliśmy wartość funkcji animacji, aby złagodzić, a zatem animacja nastąpi w sposób wolno szybki.
Wyjście
Animacja gra w sposób wolno szybki.
Animacja-iteration-Count
Ta właściwość określa, ile razy gra animacja.
Składnia
Animacja-Iteration-Count: Numer | nieskończone | początkowe | dziedziczyć;Parametr liczby określa liczbę razy odtwarzanie animacji, tymczasem Nieskończony parametr określa, że animacja będzie odtwarzana nieskończenie.
Przykład
Zrozumiemy działanie właściwości animacji, za pomocą następującego przykładu.
CSS
divPowyższy kod określa, że animacja sprawi, że kontener Div będzie przemieszczony z 0px do 100px z góry przez 5 sekund dwa razy.
Wyjście
Animacja jest odtwarzana dwukrotnie, jak określona w kodzie.
kierunek animacji
Ta właściwość określa kierunek, w którym porusza się animacja. Kierunki mogą być do przodu, do tyłu lub przełączać się między drugami.
Składnia
Kierowanie animacji: normalne | Odwrotność | Alternate | alternatywne odwrotność | dziedzictwo | wstępny;Wszystkie parametry są wyjaśnione poniżej.
Przykład
Poniższy przykład pokazuje parametr alternatywnego odwrotu właściwości animacji.
Html
Stworzyliśmy nagłówek.
CSS
H1Powyższy kod stwierdza, że nagłówek będzie poruszał się nieskończenie przez 3 sekundy od 0px do 100px od lewej strony w alternatywnej rewersji przełączającej się między kolorami brązowo-żółtą.
Wyjście
Właściwość kierowania animacji została pomyślnie zaimplementowana.
tryb animacji
Ta właściwość określa styl elementu w momencie, gdy animacja nie gra. Oznacza to, jaki styl element będzie miał albo przed rozpoczęciem animacji, po zakończeniu lub obu.
Składnia
tryb animacji: Brak | napastnicy | wstecz | Oba | dziedzictwo | wstępny;Wszystkie parametry są wyjaśnione poniżej.
Przykład
Zobaczmy, jak działa parametr do przodu, postępując zgodnie z poniższym przykładem.
Html
Po prostu stworzyliśmy kontener DIV.
CSS
divW powyższym kodzie ustawiliśmy właściwość w trybie animacji na parametr do przodu, dlatego kontener Div zachowa styl określony w ostatnim ramce kluczowej, gdy animacja zostanie zatrzymana, a nie odtwarzana.
Wyjście
Pojemnik Div ma żółty kolor tła, gdy animacja jest zatrzymana i nie odtwarzana.
Animation-Play-State
Ta właściwość określa, czy animacja jest wykonywana lub zatrzymana.
Składnia
Animation-Play-State: Uruchamianie | Zatrzymany | dziedzictwo | wstępny;działanie Parametr jest wartością domyślną, która określa, że animacja wykonuje się, tymczasem Zatrzymany Parametr określa, że animacja jest zatrzymana.
Przykład
Załóżmy, że chcesz zatrzymać animację przy użyciu właściwości animacji-play-stan. Oto jak to robisz.
CSS
divPowyższy kod określa, że animacja zostanie zatrzymana.
Wyjście
Animacja została pomyślnie zatrzymana.
animacja
Ta nieruchomość jest właściwością skrótów dla wszystkich powyższych nieruchomości.
Składnia
animacja:Przykład
Rozważ poniższy przykład, aby zrozumieć właściwość animacji.
CSS
divOkreślamy, że animacja będzie grać w nieskończoność przez 3 sekundy w alternatywny sposób.
Wyjście
Właściwość animacji działa poprawnie.
Wniosek
Animacje są określane jako stopniowa zmiana stylu elementu. CSS zapewnia różne właściwości animacji, które są następujące: nazwa animacyjna, czas trwania animacji, animacja-opóźnienie, funkcja animacji, animacja-iteration-Count, animacja, tryb animacji, tryb animacji-play-state, i animacja. Wszystkie te właściwości są używane do określenia zachowania efektu animacji stosowanego na różne elementy HTML. W tym przewodniku wszystkie te właściwości są wyjaśnione za pomocą odpowiednich przykładów.