✅ HTML5 - Animacje

Spisie treści

Animacje są efektami podobnymi do przejść, ale poprawionymi pod względem funkcjonalności, w tym sensie, że istnieje większa kontrola nad tym, co można zrobić, dzięki dostępności większej liczby opcji wprowadzania zmian z jednego stylu do drugiego.
Właściwości animacji
Jak powiedzieliśmy wcześniej, animacje są ulepszonymi przejściami ze względu na liczbę opcji i właściwości, które pozwalają nam mieć nad nimi większą kontrolę, przyjrzymy się każdemu z nich:

opóźnienie animacji: Zastosuj określony czas, aby móc rozpocząć animację po jej aktywacji.
kierunek animacji: Określa, czy animacja powinna być odtwarzana wstecz, czy w naprzemiennych cyklach.
czas trwania animacji: Wskazuje zakres czasu, w którym animacja powinna być odtwarzana.
liczba-iteracji-animacji: Wskazuje, ile razy animacja musi zostać powtórzona, a nawet może umieścić wartość nieskończony dla nieskończonych powtórzeń tego samego.
nazwa-animacji: Określa nazwę animacji.
stan odtwarzania animacji: Umożliwia zatrzymanie animacji, a następnie kontynuowanie odtwarzania.
animacja-timing-funkcja: Określ jak mają być traktowane wartości pośrednie w animacji
animacja: Jest to skrót, za pomocą którego możemy zawrzeć wszystkie właściwości animacji w jednej deklaracji CSS i ma następującą strukturę:

animacja:
Teraz, gdy znamy dostępne właściwości, zobaczmy przykładowy kod do jego analizy:

Przykład

Istnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.

W tym przykładzie widzimy, że w momencie robienia : unosić się na elemencie będziemy mieli opóźnienie 100ms wtedy animacja będzie miała 500ms do wykonania i będzie powtarzana nieskończoną ilość razy.
Wtedy widzimy, że z nazwą jaką nadaliśmy aplikacji będziemy używać właściwości @klatki kluczowe tutaj powiemy Ci, które elementy będą animowane.
Zobaczmy, jak to powinno wyglądać w naszej przeglądarce:

POWIĘKSZAĆ

Jak widzimy następuje zmiana tła elementu to kolor litery i wielkość czcionki, pod koniec animacji wraca do stanu początkowego i cały ten proces powtarza się jeszcze raz, to daje mu ruch, który nie istnieje z wykorzystaniem przejść.
Dzięki temu pokazujemy również znaczenie nazwy animacji, ponieważ działa ona jako identyfikator, aby móc przypisać ją a @klatki kluczowe.
Na tym kończymy samouczek i dzięki temu jesteśmy już w stanie wykonać podstawowe animacje, aby zapewnić większy ruch naszym dokumentom HTML.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt