#72. Animacje CSS – ciąg dalszy.

Keyframes – podstawy

O animacjach CSS należy rozpocząć najlepiej od podstaw. Podstawą są właściwości, które pozwalają wprawić w ruch element czyli animacje.

Deklarację animacji rozpoczynamy od @keyframes, następnie dodajemy jej nazwę i otwieramy nawiasy, np. @keyframes animacjaTestowa {...}

Wewnątrz deklaracji dodajemy słowa kluczowe. Pełnią one role kroków. Możliwe keywords to: from oraz to oznaczające z angielskiego: od, do (start i koniec).

Procentowo również możemy dodawać keywordsy.

Przykładowa animacja from – to, która będzie przemieszczała element z lewej do prawej (o 100px) będzie wyglądać następująco:

@keyframes animacja {
    from {left: 0}
    to {left: 100px}
} 

Sprawdź poniższy przykład w którym zastosowałem nowo poznane właściwości:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

cool-hooks-uoq68

cool-hooks-uoq68 danielminschinski

Budowa właściwości – duration, name

Przejdźmy do poznania budowy właściwości animation. To ona jest niezbędna do wprawienia animacji w ruch.

Właściwość animation wymaga dwóch właściwości. Pierwszą jest nazwa animacji, a drugą czas jej wykonania. Możemy dopisywać do niej wartości, które są odpowiednikami za np. ilość powtórzeń.

Przykładowa właściwość wygląda następująco: animation: nazwaAnimacji 2s.

Właściwość animation możemy rozbić na pojedyncze właściwości: animation-name oraz animation-duration. Pojedyncza właściwość animation zaoszczędzi nam pisania kodu i zgrupuje potrzebne właściwości.
Spójrz na poniższy przykład z zastosowaniem powyższego rozwiązania:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

gracious-cartwright-pjf4y

gracious-cartwright-pjf4y danielminschinski

animation-timing-function – tempo animacji

We wcześniejszych moich materiałach omawiałem właściwość transition-timing-function. Teraz na tapecie mamy właściwość animation-timing-function. Działanie obydwóch właściwości jest identyczne.

animation-timing-function określa w jakim tempie wykonywać przebieg animacji, tzn. start, środek i koniec. Nie wpływają one jednak na czas trwania animacji.

Przykładowe właściwości:
ease – wartość domyślna – wolny start, szybki środek i wolny koniec,
linear – stałe tempo,
ease-in-out – wolny start i koniec,
cubic-bezier(x,x,x,x) – x to liczba od 0 do 1, dowolnie stworzona przez nas funkcja,
steps(x) – x to liczba kroków, rozbija animacje na kroki w podanej ilości.

Poniżej spójrz na przykład i przyjrzyj się różnicom między nimi:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

kind-microservice-v7vn8

kind-microservice-v7vn8 danielminschinski

animation-delay – opóźnienie animacji

Właściwość animation-delay ustala opóźnienie w wykonywaniu animacji i nie wpływa na szybkość jej wykonywania.

Wskazówka: Jeśli opóźnimy wszystkie animacje o wielokrotność czasu ich wykonania, to po pierwszym cyklu nie będzie już widoczna ta różnica czasowa. Warto przynajmniej jedną animacje opóźnić np. o 1.5 czasu jej wykonywania zamiast o 1 lub 2 czasy wykonywania.

Wykonywanie animacji o jedną sekunde może wyglądać następująco:

animation-delay: 1s; 

Spójrz na poniższy przykład mający na celu wychwycenie różnic w opóźnieniach animacji:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

blazing-cloud-nwt0d

blazing-cloud-nwt0d danielminschinski

animation-iteration-count – liczenie powtórzeń

Właściwość animation-iteration-count określa ilość powtórzeń animacji.

Wartością domyślną przytoczonej właściwości jest liczba 1. Podobnie można zrozumieć, że przykładowa wartość tej właściwości to również po prostu liczba.

Przykładowo, chcemy wykonać animacje pięć razy to właściwość będzie wyglądała następująco:

animation-iteration-count: 5; 

W przypadku gdy chcemy, żeby animacja nie zatrzymywała się po określonej ilości powtórzeń – jak to zrobić? Należy użyć wartości infinite. Właściwość w takim układzie będzie wyglądać następująco:

animation-iteration-count: infinite; 

Spójrz na poniższy przykład z zastosowaniem właściwości która liczy powtórzenia:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

blue-rain-tx9ix

blue-rain-tx9ix danielminschinski

Animacja – projekt

Stwórzmy użyteczną animacje, dzięki poznanym wcześniej właściwościom. Będzie to tzw. spinner – animacja ładowania. 

Sprawdź poniższy przykład i spróbuj zapoznać się z jego kodem:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

jolly-resonance-qh72l

jolly-resonance-qh72l danielminschinski

Myślę, że rozwiałem sporo Waszych wątpliwości na temat animacji. Każda poznana właściwość ma szerokie zastosowania. W zależności na czym nam zależy, należy użyć odpowiedniej z nich. Poćwiczcie sobie na swoich przykładach. W następnym materiale poruszę kwestie filtrów CSS – także z góry zapraszam. 

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!