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:
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:
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:
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:
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:
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:
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