Animacje CSS - Animation @keyframes

Bez wątpienia animacje CSS umożliwiają dodanie dynamiki i interaktywności do stron internetowych. Dodatkowo pozwalają one na płynne przejścia pomiędzy różnymi stanami elementów, tworząc bardziej atrakcyjne i angażujące doświadczenia użytkownika. Dlatego Poniżej przedstawię podstawy animacji w CSS, sposób ich tworzenia i zastosowania w praktyce.

Jak stworzyć animacje w CSS?

Przede wszystkim animacje w CSS pozwalają na stopniową zmianę stylów elementu od jednego zestawu do drugiego. Co więcej dzięki regule @keyframes możemy definiować szczegółowe kroki animacji, co daje nam pełną kontrolę nad tym, jak elementy zmieniają się w czasie.

Animacja

selektor { animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-interation-count] [animation-direction] [animation-fill-mode]; }

animation-name – określa nazwę animacji, która ma zostać zastosowana
animation-duration – czas trwania animacji
animation-timing-function – szybkość wykonywania animacji w różnych fazach jego trwania
- linear – stała szybkość
- ease – ease – szybciej na początku, wolniej pod koniec (domyślne ustawienie)
- ease-in – wolniej na początku
- ease-out – wolniej pod koniec
- ease-in-out – wolniej na początku i pod koniec
- cubic-bezier – własne ustawienie szybkości (wartości od 0 do 1)
animation-delay – opóźnienie rozpoczęcia animacji
animation-interation-count – liczba powtórzeń animacji
- infinite – ciągłe powtarzanie
- wartość liczbowa – liczba powtórzeń
animation-direction – kierunek animacji
- normal – animacja będzie przebiegać od początku do końca
- reverse – animacja będzie przebiegać od końca do początku
- alternate – rozpoczęcie animacji od początku, powtarzanie w przeciwnym kierunku
- alternate-reverse – rozpoczęcie animacji od końca, powtarzanie w przeciwnym kierunku
animation-fill-mode – wygląd animacji przed rozpoczęciem lub po zakończeniu
- none – brak efektu (domyślne ustawienie)
- forwards – styl elementu po zakończeniu animacji zgodny z deklaracją w ostatnim selektorze animacji
- backwards – styl elementu przed rozpoczęciem animacji zgodny z deklaracją w pierwszym selektorze animacji
- both – styl elementu po rozpoczęciu i zakończeniu animacji zgodny z deklaracjami odpowiednio w pierwszym i ostatnim selektorze animacji
animation-play-state – wstrzymanie lub wznowienie animacji
- paused – wstrzymanie animacji
- running – wznowienie animacji

Skrócony zapis animacji

Wszystkie powyższe właściwości można zapisać w skróconej formie:

.box { animation: nazwa_animacji 5s ease 1s infinite alternate none; }

Składnia @keyframes

Kluczowym elementem animacji CSS jest reguła @keyframes. Dzięki niej definiujemy kluczowe klatki, czyli punkty, w których następują zmiany właściwości.

@keyframes nazwa_animacji
  from {
    /* Początkowy stan animacji */
    property: value;
  }
  to {
    /* Końcowy stan animacji */
    property: value;
  }
}

Alternatywnie, możemy użyć procentów do określenia bardziej szczegółowych kroków animacji:

@keyframes nazwa_animacji
  0% {
    /* Początkowy stan animacji */
    property: value;
  }
  50% {
    /* Środkowy stan animacji */
    property: value;
  }
  100% {
    /* Końcowy stan animacji */
    property: value;
  }
}

Przykład animacji

.box {
padding: 15px; margin: 10px 0px 0px 20px; width: 95px; height: 95px;
animation: animacja 5s ease 1s infinite alternate none;
}

.box:hover { animation-play-state:paused; }

@keyframes animacja
{
0% { margin-left: 0; background: dodgerblue }
25% { margin-left: 5%; background: crimson }
50% { margin-left: 15%; background: darkorange }
75% { margin-left: 30%; background: limegreen }
100% { margin-left: 60%; background: darkgreen }
}

Animacja tła i przemieszczanie box-a.

Animacje CSS – podsumowanie

Przede wszystkim animacje CSS z użyciem @keyframes pozwalają na tworzenie płynnych i atrakcyjnych efektów wizualnych. Dzięki nim możemy animować zmiany właściwości CSS w sposób bardziej złożony i kontrolowany niż za pomocą przejść (transition). Dlatego poprzez zrozumienie podstawowych właściwości animacji oraz @keyframes, możemy tworzyć bardziej interaktywne i estetyczne strony internetowe.

Z pewnością eksperymentowanie z różnymi technikami animacji oraz narzędziami do ich tworzenia pozwoli na zdobycie doświadczenia i umiejętności potrzebnych do tworzenia zaawansowanych animacji.