Animacje w css

Animacje w css dzięki nim możesz stopniowo zmieniać określone style danego elementu w czasie – to naprawdę potężne narzędzie. Animacje css możesz traktować jak oś czasu. Aby utworzyć animację, musisz najpierw określić kilka klatek kluczowych. Dla zdefiniowania klatki kluczowej używamy zapytania @keyframes i nadajemy jej, jej własna, specyficzną nazwę.

Dla pierwszej klatki kluczowej na początku animacji czyli 0% definiujesz właściwości startowe i tak samo dla ostatniej klatki czyli 100% również definiujesz właściwości.

Następnie aby zastosować tę animację do elementu, należy wybrać element docelowy, dodając do niego nazwę animacji animation-name. Następnie wystarczy określić czas trwania animacji css animation-duration i tu możesz podać na przykład 1 minutę lub 1 milisekundę. Oraz podajesz ilość powtórzeń animacji, ponieważ defaultowo animacja odtwarza się tylko raz animation-iteration-count. Jeśli chcesz by animacja odtwarzała się cały czas ustawiasz parametr na wartośćinfinite.

.element {
  animation-name: spin;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running
}

Wartości animation

• animation-name: spin – podajesz nazwę animacji, którą definiujesz poprzez słowo kluczowe @keyframes
• animation-duration: 1s – określasz jak długo będzie trwała animacja, cały cykl animacji trwa wtedy 1s i po tym czasie wraca do stanu początkowego elementu
• animation-timing-function: ease, wartość domyślna ease – definiuje w jaki sposób animacja jest wykonywana, czyli krzywą prędkości animacji, w jakich momentach przyspiesza a w jakich zwalnia, tu znajdziesz ciekawe zobrazowanie easings.net. Użycie wartości „linear” sprawi, że animacja będzie odtwarzana ze stałą prędkością, a użycie innego rodzaju „easing” – złagodzenia sprawi, że animacja będzie płynniejsza.
• animation-delay: 1s – dzięki tej własności możesz określić ile czasu animacja „czeka” zanim się wykona
• animation-iteration-count: 1 – określa ile razy animacja zostanie wykonana, defaultowo jest 1, czyli jeden raz i wraca do stanu początkowego, jeśli podasz „infinite” będzie odtwarzana w nieskończoność, dzięki czemu możesz zapętlić animację
• animation-direction: – określa czy animacja ma wykonywać się od początku do końca (normal) czy od końca do początku (reverse). Kiedy masz wiele iteracji, możesz ustawić wartość na „alternate”, co sprawi, że będzie naprzemiennie przewijać do przodu i do tyłu.
• animation-fill-mode – przy użyciu wartości 'forwards’ pozwoli ci na zatrzymanie stanu elementu na ostatnim stanie/klatce animacji
• animation-play-state – pozwala na interakcje użytkownika z animacją, running – daje stan aktywnej animacji, paused – zatrzymuje animację, możesz użyć tego w kombinacji z :hover – wtedy po najechaniu na element animacja się zatrzymuje, lub odwrotnie, nadać pierw animacji stan paused a przy :hover dać running, wtedy po najechaniu na element animacja się uruchomi

@keyframes

@keyframes spin {
  0% {
    
  }
  50% {
    scale: 2;
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
    
  }
}

• Kiedy dasz scale:2 tylko w 50%, wtedy w połowie animacji element się powiększy a potem wróci do poprzedniej wielkości.
• Kiedy scale:2 dasz również w 100% zostanie powiększony do końca animacji.
• Kiedy chcesz by pierw element się powiększył a dopiero następnie obrócił, musisz do 50% dodać stan 0 obrotu, czyli transform: rotate(0).

Musisz być bardzo konkretny, kiedy określasz animację danej właściwości CSS. Jeśli nie zostanie to określone, po prostu przyjmie resztę sekwencji i idealnie połączy pierwszy krok z następnym.

animation shorthand

Gdzie w po koleji masz własności: duration, name, timing-function, delay, iteration-count, direction

animation: 3s spin ease-in-out 1s infinite alternate