Animacje

Animacje pozwalaja na zwiększenie atrakcyjności naszej strony i zapewnienie lepszych wrażeń użytownika. Są one dopełnieniem designu strony, i stanowią często ważny element ograniczajacy frustracje użytkownika. Np. paski ładowania czy potwierdzenia kliknięcia to jede z nich.

Po co robi się animacje

Animacje na stronach internetowych mają kilka istotnych zastosowań. Po pierwsze, przyciągają uwagę użytkowników i sprawiają, że strona staje się bardziej atrakcyjna wizualnie, co może zwiększyć zaangażowanie użytkowników. Po drugie, mogą być używane do dynamicznego prezentowania treści, ułatwiając przyswajanie informacji. Po trzecie, mogą pełnić funkcje informacyjne, np. poprzez animowane wykresy czy infografiki, które lepiej przekazują dane. Dodatkowo, animacje mogą też poprawiać interaktywność strony, np. przez animowane przyciski czy efekty przejścia. Wreszcie, dobrze zaprojektowane animacje mogą poprawić doświadczenie użytkownika, sprawiając, że nawigacja po stronie jest bardziej płynna i intuicyjna.
Trzeba jednak uważać ze zbyt dużą ilością skomplikowanych animacji, ponieważ te zużywają moc obliczeniową i wydłużają ładowanie strony, co jest nie porządane, gdy chcemy stworzyć stronę z dobrą opinią wśród użytkowników. Należy pamiętać też że dobry design, to prosty design. Jeśli popatrzymy na najczęściej odwiedzane strony internetowe są one intuicyjne i banalnie proste w budowie, powtarzalne. A robi się to po to, aby użytkownik załatwił jak najszybciej to, co potrzebuję.

transform i transition

transform i transition, to podstawowe elementy tworzenia animacji. transform oznacza jak ma się zmieniać dany obiekt, a transition określa w jaki sposób animacja ma przebiegać. Przykładowo, jeśli chcemy aby element powiększył się o 20% użyjemy transform: scale(1.2), a w transition umieścimy opis jak animacja ma się wykonać np. transition: 2s ease-in; Animacja z nagłówka tego artykułu wygląda tak:

img{
transform: rotate(360deg); 
transition: linear 3s;
}

Polecam zagłębić się w temat transition i transform, ponieważ pozwala on na tworzenie bardzo fajnych animacji, nie dużą ilością pracy.

@keyframes

@keyframes to określenie definiujące animacje. Mówimy że tworzymy zestaw klatek, które będą wykonywały jakąś czynność.
Kod animacji z nagłówka tej strony wygląda tak:

@keyframes rotation {
  from{ /*from oznacza pozycję początkową*/
    transform: rotate(0deg);
  }
  to{/*to oznacza pozycję końcową*/
    transform: rotate(360deg);
  }
  /*Możemy też spotkać się z takim zapisem: 0%{

  }
  60%{ Określa on co ma dziać się w poszczególnych momentach trwania animacji.

  }
  100%{

  }*/
}
.header-img{
  /*aniamtion działa podobnie jak transition tyle że dodajemy nazwę animacji i mamy kilka opcji więcej*/
  animation: rotation 3s linear infinite; /*animation: name duration timing-function delay iteration-count direction fill-mode;*/ 
  /*to wszystkie możliwe cechy które może przyjąć animacja*/
}

Teraz już znasz podstawy tworzenia animacji. Animacji najlepiej uczyć sie tworząc je dlatego zapraszam do eksperymentowania.