CSS już dawno przestał być tylko językiem do kolorowania naszej strony czy formatowaniu tekstu. Kolejne wersje dodają coraz bardziej zaawansowane elementy do niego co powoduje, że niektóre czynności, do których wcześniej potrzebowaliśmy skryptów i zewnętrznych bibliotek, jesteśmy w stanie ograć samym CSS’em. Dziś chciałbym omówić jedną z nich czyli animacje.

Czym są animacje?

Jednak zanim przejdę bezpośrednio do animacji w CSS warto powiedzieć czym są one tak naprawdę. Według Wikipedii animacja jest to ożywianie martwych kształtów poprzez dokonanie wielu fotografii, rysunków a potem wyświetlanie ich w sposób ciągły. Każdy rysunek różni się od poprzedniego w niewielkim stopniu co powoduje, że powstaje wrażenie ruchu. I za chwilę zobaczycie, że w CSS zasada działania jest identyczna.

Właściwość animation

W CSS mamy grupę właściwości, które zaczynają się od słówka animation i kontrolują różne aspekty naszej własnej animacji. Mamy 8 następujących właściwości:

Klatki animacji

Parę razy przy opisie właściwości użyłem słowa klatka. Tak jak wspominałem mechanizm w CSS jest podobny do tego co znamy z kina. Definiujemy jak ma wyglądać nasz animowany element w poszczególnych punktach animacji pozwalając przy przeglądarka sama zdecydowała jak przejść pomiędzy punktami. Jest to ważne ze względów wydajnościowych ponieważ silnik przeglądarki jest w stanie zoptymalizować te zmiany tak by były jak najmniej obciążające dla niego.

Aby zdefiniować własne kroki musimy wykorzystać specjalną konstrukcję @keyframes, która ma następującą strukturę:

@keyframes name {
  from {
    margin-left: 0%; 
   background-color: yellow
  } 

  to {
    margin-left: 90%;
    background-color: green;
  }
}


name jest to nazwa naszego zbioru klatek i to właśnie ja wpisujemy we własności animation-name. Następnie mamy definicję naszych kroków przy pomocy dwóch słów kluczowych: from i to. W nich określamy jak ma wyglądać nasz element na początku oraz na końcu animacji. To co dzieje się pomiędzy wylicza sama przeglądarka. Nie jesteśmy ograniczeniu tylko do dwóch punktów. Możemy określić punkty w których chcemy by element przyjął konkretne wartości przy pomocy procentów gdzie 0% to odpowiednik from a 100% odpowiada to.

@keyframes name {
  0% {
    margin-left: 0%; 
    background-color: yellow
  }

  50%{
    margin-top: 100px;  
  }
  
  100% {
    margin-left: 90%;
    background-color: green;
  }
}

A jakie właściwości dać w naszych wybranych punktach? Odpowiedź brzmi każdą jaka jest poprawna w CSS czyli marginesy, kolor oraz transformacje o których opowiem trochę w jednym z następnych postów.

See the Pen CSS Animations by Aleksander (@Feridum) on CodePen.

No i na sam koniec jeszcze mały przykład animacji wahadła. Warto tutaj zauważyć jak wiele potrafi zrobić przeglądarka by animacja była płynna. Kolor został ustalony tylko dla pierwszej i ostatniej klatki natomiast na animacji płynnie zmienia się z jednej w drugą. Warto również zobaczyć do kodu gdzie kostki mają uustawiony kolor czerwony jako domyślny, ale dzięki wykorzystaniu animation-fill-mode: backwards; tuż przed rozpoczęciem animacji mają kolor zółty. No i przy definicji klatek możemy mieszać określanie klatek przy pomocy słów from i to z wartościami procentowymi.

Samo tworzenie animacji nie jest trudne i pozwala osiągnąć ładne efekty przy minimalnym wysiłku. Więc jeśli potrzebujecie coś takiego zrobić i jesteście w stanie to osiągnąć w CSS to wykorzystajcie to zamiast ściągać kolejną bibliotekę Javascript. No i do usłyszenia wkrótce :)