niedziela, 2024-03-03

CSS: Wprowadzenie do animacji

Animacje CSS mogą znacząco poprawić użytkowanie i estetykę strony, pozwalając na płynne przejścia, transformacje i efekty wizualne.

Zastosowanie i dobre praktyki

Praktyczne zastosowanie

Interaktywność: Animacje mogą być wyzwalane przez interakcje użytkownika, takie jak kliknięcia, najechanie kursorem, przewijanie strony itp.
Wizualne wskazówki: Używaj animacji, aby zwrócić uwagę użytkownika na ważne elementy, pokazać postęp w zadaniach lub poprowadzić przez interfejs.
Estetyka: Popraw estetykę strony, dodając płynne przejścia i subtelne efekty wizualne, które wzbogacają doświadczenie użytkownika.

Najlepsze praktyki

Użyteczność: Upewnij się, że animacje poprawiają, a nie pogarszają doświadczenia użytkownika.
Wydajność: Optymalizuj animacje, aby były płynne i nie obciążały nadmiernie przeglądarki.
Dostępność: Zadbaj o to, aby animacje nie utrudniały dostępu do treści, szczególnie dla osób z zaburzeniami percepcji.

Właściwości animacji CSS

animation-name: określa nazwę kluczowych klatek animacji;
animation-duration: definiuje, jak długo animacja ma się wykonywać;
animation-timing-function: określa tempo zmian animacji (np. linear, ease-in, ease-out, ease-in-out);
animation-delay: ustawia opóźnienie przed rozpoczęciem animacji;
animation-iteration-count: określa, ile razy animacja powinna się powtórzyć;
animation-direction: definiuje, czy animacja powinna być odtwarzana wstecz, czy też naprzemiennie;
animation-fill-mode: określa, jakie style są stosowane do elementu przed i po animacji;
animation-play-state: pozwala na zatrzymanie i wznowienie animacji.

Skrócony zapis własności CSS

Skrócony zapis własności CSS dla animacji pozwala określić wszystkie kluczowe informacje dotyczące animacji w jednej linii, zamiast definiować każdą właściwość osobno. Używanie takiej formy jest wygodne i może znacznie uprościć kod CSS, ale ważne jest, aby pamiętać o odpowiedniej kolejności wartości. Jeśli jakakolwiek wartość zostanie pominięta, zostaną zastosowane wartości domyślne. To podejście jest szczególnie przydatne, gdy zarządzasz wieloma animacjami i chcesz zachować czytelność oraz łatwość utrzymania kodu.

Przykład skróconego zapisu

div {
  animation: example 5s ease-in-out 1s 2 reverse both;
}

W tym skróconym zapisie:

example to wartość animation-name, nazwa animacji zdefiniowana w klatkach kluczowych (@keyframes);
5s to wartość animation-duration, czas trwania animacji;
ease-in-out to wartość animation-timing-function, funkcja określająca tempo zmian animacji;
1s to wartość animation-delay, opóźnienia przed rozpoczęciem animacji;
2 to wartość animation-iteration-count, liczba powtórzeń animacji;
reverse to wartość animation-direction, kierunek animacji;
both to wartość animation-fill-mode, sposób stosowania stylów przez animację przed jej rozpoczęciem i po zakończeniu.

Klatki kluczowe (Keyframes)

Klatki kluczowe definiują styl elementu w różnych punktach animacji i umożliwiają precyzyjne kontrolowanie sekwencji, określając zmiany w stylach dla poszczególnych momentów.

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

Lub z użyciem procentów:

@keyframes example {
  0%   {background-color: red;}
  50%  {background-color: blue;}
  100% {background-color: yellow;}
}

Przykłady

Przykładowe klatki kluczowe

Poniższe klatki kluczowe klatki definiują animację, w której kolor tła elementu zmienia się od czerwonego przez niebieski do żółtego. Są one wykorzystywane w kolejnych przykładach.

@keyframes example {
  0%   {background-color: red;}
  50%  {background-color: blue;}
  100% {background-color: yellow;}
}

Podstawowa animacja

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Nieskończona animacja

Używając właściwości animation-iteration-count można sprawić, by animacja była nieskończona.

<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
</style>

W tym przypadku animacja będzie się powtarzać w nieskończoność, cyklicznie zmieniając kolor tła z czerwonego na niebieski, a potem na żółty i z powrotem do czerwonego.

Animacja z opóźnieniem

W tym przykładzie animacja zacznie się po 2 sekundach od załadowania strony.

<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}
</style>