Animacje w CSS

Animacje w CSS
W celu upiększenia projektu stron internetowych, dodanie animacji jest wysoce zalecane. Animacje są określane jako płynna zmiana w stylu elementu. CSS pozwala z łatwością dodawać animacje do różnych elementów.

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

P
Rozmiar czcionki: 30px;
Pozycja: względny;
animacja-nazwa: animacja;
Czas trwania animacji: 5s;

@KeyFrame Animation
z left: 0px;
do lewy: 200px;

Przed 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

div
szerokość: 100px;
Wysokość: 100px;
kolor tła: Brown;
Pozycja: względny;
animacja-nazwa: animacja;
Czas trwania animacji: 3s;

@KeyFrame Animation
z left: 0px;
do lewy: 200px;

Opró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

div
szerokość: 100px;
Wysokość: 100px;
kolor tła: Brown;
Pozycja: względny;
animacja-nazwa: animacja;
Czas trwania animacji: 5s;
animacja-opóźnienie: 2s;

@KeyFrame Animation
z left: 0px;
do lewy: 200px;

Powyż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.

  • łatwość: Animacja występuje w sposób powolny.
  • liniowy: Animacja będzie miała taką samą prędkość od rozpoczęcia do końca.
  • łatwość: Animacja będzie miał powolny początek.
  • Ułatwianie: Animacja będzie miała powolne zakończenie.
  • Łatwo: Animacja będzie miał powolny początek, a także powolny koniec.
  • Cubic-Bezier (N, N, N, N): Wartości animacji zostaną ustawione w sposób sześcienny.

Przykład
Poniższy przykład pokazuje parametr łatwości omawianej nieruchomości.

CSS

div
animacja-nazwa: animacja;
Czas trwania animacji: 5s;
Funkcja animacji: łatwość;

@KeyFrame Animation
z left: 0px;
do lewy: 200px;

Ustawiliś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

div
animacja-nazwa: animacja;
Czas trwania animacji: 5s;
Animacja-Iteration-Count: 2;

@KeyFrame Animation
z top: 0px;
do top: 100px;

Powyż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.

  • normalna: Jest to domyślny parametr, który odtwarza animację.
  • odwracać: Ten parametr odgrywa animację w odwrotnym kierunku.
  • alternatywny: Ten parametr odgrywa animację najpierw w kierunku do przodu, a następnie w kierunku do tyłu.
  • alternatywne odwrotność: Ten parametr odtwarza animację najpierw w odwrotnym kierunku, a następnie kierunek do przodu.

Przykład
Poniższy przykład pokazuje parametr alternatywnego odwrotu właściwości animacji.

Html

Witaj świecie

Stworzyliśmy nagłówek.

CSS

H1
kolor brązowy;
Pozycja: względny;
animacja-nazwa: animacja;
Czas trwania animacji: 3s;
Animacja-Iteration-Count: Infinite;
kierunek animacji: naprzemiennie-odwrotność;

@KeyFrame Animation
z left: 0px; kolor brązowy;
do left: 100px; kolor żółty;

Powyż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.

  • nic: Jest to domyślny parametr, który nadaje styl elementowi.
  • napastnicy: Ten parametr utrzymuje styl elementu zdefiniowanego przez ostatnią klatkę kluczową.
  • wstecz: Ten parametr utrzymuje styl elementu zdefiniowanego przez pierwszą klatkę kluczową i utrzymuje ten styl w czasie opóźnienia animacji.
  • Zarówno: Ten parametr przełącza się między parametrami do przodu i do tyłu.

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

div
szerokość: 100px;
Wysokość: 100px;
kolor tła: Brown;
Pozycja: względny;
animacja-nazwa: animacja;
Czas trwania animacji: 3s;
tryb animacji: naprzód;

@KeyFrame Animation
z left: 0px;
do left: 100px; kolor tła: żółty;

W 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

div
animacja-nazwa: animacja;
Czas trwania animacji: 3s;
Animation-Play-State: Zatrzymany;

@KeyFrame Animation
z left: 0px;
do lewy: 100px;

Powyż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

div
Animacja: animacja 3s nieskończona alternatywa;

@KeyFrame Animation
z left: 0px; kolor tła: Brown;
do left: 200px; kolor tła: żółty;

Okreś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.