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