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ę:
Teraz, gdy znamy dostępne właściwości, zobaczmy przykładowy kod do jego analizy:
PrzykładIstnieje 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Ć
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
