W jednym z artykułów pokazałem, jak zrobić proste animacje właściwością css transition, czyli przeprowadzić właściwość z jednej wartości do drugiej za pomocą przejść CSS3. Kłopot w tym, że przejścia CSS3 dają niewiele kontroli nad tym, jak animacja rozwija się w czasie.
Właściwość css animation pozwala z kolei budować animacje na klatkach kluczowych (po angielsku @keyframes).
Tworzenie animacji CSS3
Animacje CSS opierają się na keyframes, czyli klatkach kluczowych, które pozwalają rozpisać zmiany właściwości CSS w czasie, podobnie jak dawne animacje we flashu.
- Pierwszy krok przy tworzeniu animacji CSS to zdefiniowanie poszczególnych klatek kluczowych i nadanie animacji nazwy w deklaracji keyframes.
- Drugi krok to odwołanie się do keyframes po nazwie, właściwością animation-name, oraz dodanie właściwości animation-duration i innych, opcjonalnych właściwości animacji, które sterują jej zachowaniem.
Nie musisz jednak definiować całej reguły keyframes zanim się do niej odwołasz albo ją zastosujesz.
Poniższy przykład pokazuje, jak przesunąć <div> w poziomie z jednej pozycji na drugą za pomocą właściwości css animation.
See the Pen
[1] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Żeby animacja w ogóle ruszyła, musisz podać co najmniej dwie właściwości: animation-name i animation-duration (większą od 0). Wszystkie pozostałe właściwości animacji są opcjonalne, bo ich wartości domyślne nie blokują odtworzenia animacji.
Uwaga: nie każdą właściwość CSS da się animować. Z reguły animowalna jest każda właściwość przyjmująca liczby, długości, procenty albo kolory.
Definiowanie klatek kluczowych (keyframes)
Klatki kluczowe służą do podawania wartości właściwości animacji na kolejnych etapach jej trwania. Definiuje się je wyspecjalizowaną regułą CSS – @keyframes. Selektor klatki kluczowej zaczyna się od procentu (%) albo od słowa kluczowego from (czyli 0%) lub to (czyli 100%). Selektor mówi, w którym miejscu czasu trwania animacji dana klatka zostaje zadeklarowana.
Procenty odnoszą się do czasu trwania animacji. 0% to punkt startowy, 100% to punkt końcowy, 50% to środek i tak dalej. Innymi słowy, klatka kluczowa 50% w animacji trwającej 2 sekundy przypada na jej pierwszą sekundę.
See the Pen
[2] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Właściwość animation w skrócie
Przy budowaniu animacji trzeba wziąć pod uwagę sporo właściwości. Da się jednak zapisać je wszystkie w jednej właściwości i skrócić w ten sposób kod.
Właściwość animation to skrót, który ustawia wszystkie pojedyncze właściwości animacji naraz, w podanej kolejności. Na przykład:
See the Pen
[3] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Uwaga: jeśli jakiejś wartości brakuje albo nie została podana, użyta zostanie wartość domyślna danej właściwości. Innymi słowy, gdy zabraknie wartości animation-duration, nic się nie wydarzy, bo domyślnie wynosi ona 0.
Właściwości animacji CSS3
Poniższa tabela to krótki przegląd wszystkich właściwości css animation związanych z animacją.
| Właściwość | Opis |
|---|---|
|
animation |
Skrócona właściwość, która ustawia wszystkie właściwości animacji w jednej deklaracji. |
|
animation-name |
Wskazuje nazwę animacji zdefiniowanych przez @keyframes, które mają zostać nałożone na wybrany element. |
|
animation-duration |
Określa, ile sekund lub milisekund trwa jeden cykl animacji. |
|
animation-timing-function |
Określa, jak animacja postępuje w trakcie każdego cyklu, czyli funkcje easing, ease-in, ease-out, …. |
|
animation-delay |
Określa, kiedy animacja się zacznie. |
|
animation-iteration-count |
Określa, ile razy cykl animacji ma zostać odtworzony, zanim się zatrzyma. |
|
animation-direction |
Wskazuje, czy animacja ma być odtwarzana w odwrotnym kierunku w co drugim cyklu. |
|
animation-fill-mode |
Określa, jak animacja CSS ma nakładać style na swój element przed uruchomieniem i po nim. |
|
animation-play-state |
Określa, czy animacja jest odtwarzana, czy wstrzymana. |
|
@keyframes |
Podaje wartości właściwości animacji w kolejnych momentach jej trwania. |
Podsumowanie
Masz już podstawy, żeby robić animacje CSS3. Możesz też sięgnąć po biblioteki animacji, które mocno ułatwiają całą robotę.
