@keyframes oraz selektory czasu animacji

Do języka CSS co jakiś czas są dodawane różne nowości, które z biegiem czasu są poprawnie interpretowane przez różne najpopularniejsze przeglądarki internetowe. Jedną z tych nowości jest animacja. Dodanie animacji do elementu HTML jest bardzo proste. Możemy wykorzystać do tego celu właściwość animation.

Za pomocą wspomnianej właściwości animation możemy określić:

Przede wszystkim za pomocą właściwości animation możemy określić nazwę animacji (animation-name), jaka ma zostać dodana do danego elementu HTML, jednak pierw taką animację musimy sami utworzyć. W tym momencie zaczyna się nasza zabawa z... selektorami czasu animacji i regułą @keyframes.

Na wstępie muszę zaznaczyć, że nie wszystkie właściwości CSS mogą zostać użyte do utworzenia animacji za pomocą reguły @keyframes, dlatego podczas przeglądania właściwości CSS możesz ujrzeć informację o tym, która właściwość CSS może być animowana, a która nie. Możemy również obejrzeć przykładową animację.

Jedną z właściwości CSS, którą możemy wykorzystać do utworzenia animacji jest dobrze nam już znana właściwość background-color.

Przykładowa reguła @keyframes została umieszczona poniżej:

@keyframes moja_animacja
{
  0% { background-color:white; }
  25% { background-color:gold; }
  50% { background-color:red; }
  75% { background-color:green; }
  100% { background-color:white; }
}

Obok słowa kluczowego @keyframes należy umieścić nazwę jaką chcemy, aby posiadała nasza animacja (np. moja_animacja). Następnie umieszczamy nawiasy klamrowe i w tych nawiasach zapisujemy reguły animacji, które są tworzone za pomocą różnych dostępnych właściwości CSS (np. background-color). Przed każdą taką regułą należy umieścić selektor czasu animacji, którego wartość jest zapisywana za pomocą jednostek wyrażonych w procentach (np. 0%, 25%, itd.). Selektory czasu animacji należy umieszczać w uporządkowanej kolejności rosnącej (od najmniejszej wartości 0%, do największej wartości 100%).

Zobaczmy co się stanie z przykładowym elementem HTML, gdy dodamy do niego wyżej utworzoną animację moja_animacja, za pomocą właściwości animation:moja_animacja 12s infinite;

przykładowy element - div

Zapis animation:moja_animacja 12s infinite; mówi przeglądarce internetowej, że:

  • moja_animacja - dodaj do elementu animację o nazwie moja_animacja
  • 12s - spraw, aby animacja trwała 12 sekund
  • infinite - spraw, aby animacja powtarzała się w nieskończoność

Selektory czasu animacji określają od jakiej i na jaką wartość, w jakim procencie całego czasu trwania animacji, właściwości CSS, podane w nawiasie klamrowym, mają się zmienić.

Nasza animacja moja_animacja ma trwać dwanaście sekund, a więc:

@keyframes moja_animacja
{
  0% { background-color:white; } /* 0% oznacza początek animacji */
  25% { background-color:gold; } /* 25% oznacza 3-cią sekundę, bo 25% z 12s, to 3s */
  50% { background-color:red; } /* 50% oznacza 6-stą sekundę, bo 50% z 12s, to 6s */
  75% { background-color:green; } /* 75% oznacza 9-tą sekundę, bo 75% z 12s, to 9s */
  100% { background-color:white; } /* 100% oznacza koniec animacji */
}

Analizując zapis przedstawiony powyżej, możemy dojść do wniosku, że:

0% { background-color:white; }
Na początku animacji nasz element będzie posiadał białe tło (background-color:white;), następnie...
25% { background-color:gold; }
...tło elementu HTML będzie powoli zmieniało swój kolor, od początku trwania animacji, do trzeciej sekundy trwania animacji. W trzeciej sekundzie animacji tło będzie koloru złotego (background-color:gold;), następnie...
50% { background-color:red; }
...tło elementu HTML będzie powoli zmieniało swój kolor, od trzeciej sekundy trwania animacji, do szóstej sekundy trwania animacji. W szóstej sekundzie animacji tło będzie koloru czerwonego (background-color:red;), następnie...
75% { background-color:green; }
...tło elementu HTML będzie powoli zmieniało swój kolor, od szóstej sekundy trwania animacji, do dziewiątej sekundy trwania animacji. W dziewiątej sekundzie animacji tło będzie koloru zielonego (background-color:green;), następnie...
100% { background-color:white; }
...tło elementu HTML będzie powoli zmieniało swój kolor, od dziewiątej sekundy trwania animacji, do dwunastej sekundy trwania animacji. W dwunastej sekundzie animacji tło będzie koloru białego (background-color:white;), następnie...
animation: moja_animacja 12s infinite;
...cały proces będzie powtarzać się w nieskończoność, od początku, ponieważ użyliśmy wartość infinite wraz z właściwością animation.

Cały kod dokumentu HTML z tej części kursu CSS został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      div {
        text-align:center;
        padding:15px 0;
        animation:moja_animacja 12s infinite;
        -webkit-animation:moja_animacja 12s infinite; /* dla Google Chrome, Safari, Opera 15+ */
      }

      /* ---------------------REGUŁY-ANIMACJI--------------------- */
      @keyframes moja_animacja
      {
        0% { background-color:white; }
        25% { background-color:gold; }
        50% { background-color:red; }
        75% { background-color:green; }
        100% { background-color:white; }
      }

      @-webkit-keyframes moja_animacja /* dla Google Chrome, Safari, Opera 15+ */
      {
        0% { background-color:white; }
        25% { background-color:gold; }
        50% { background-color:red; }
        75% { background-color:green; }
        100% { background-color:white; }
      }
    </style>
  </head>

  <body>

    <div>przykładowy element - div</div>

  </body>
</html>

Selektory czasu animacji, które znajdują się w regule @keyframes, możemy grupować (czyli oddzielać od siebie przecinkiem), tak jak to ma miejsce w przypadku zwykłych selektorów występujących w regułach CSS.

W zapisie, który został umieszczony poniżej, selektor 0% oraz 100% zostały umieszczone w jednej linii i zostały oddzielone do siebie przecinkiem, ponieważ oba selektory czasu animacji (0% oraz 100%) mają mieć tą samą właściwość CSS wraz z tą samą wartością.

@keyframes moja_animacja
{
  0%, 100% { background-color:white; }
  25% { background-color:gold; }
  50% { background-color:red; }
  75% { background-color:green; }
}

W regule @keyframes wygodnie jest dla nas umieszczać selektory czasu animacji oznaczone jako 0% oraz 100%, dzięki czemu wiemy od jakich właściwości CSS rozpoczyna się dana animacja oraz jakimi właściwościami CSS kończy się dana animacja, jednak nasz zapis selektorów czasu animacji równie dobrze możemy zacząć się od selektora, który będzie miał inną wartość niż 0%, np. 25%. Nasz zapis selektorów czasu animacji możemy zakończyć innym selektorem niż 100%, np. 75%.

@keyframes moja_animacja
{
  25% { background-color:gold; }
  50% { background-color:red; }
  75% { background-color:green; }
}

W tym wypadku przeglądarka internetowa sprawdzi pierw czy dla elementu HTML, do którego została dodana animacja o nazwie moja_animacja, została określona jakaś wartość właściwości background-color (np. w zwykłej regule CSS, która określa wygląd elementu HTML) i to od tej wartości będzie rozpoczynała się dana animacja (wartości domyślne też są brane pod uwagę, dlatego w naszym przykładzie animacja rozpoczyna się od wartości transparent oraz kończy się również na tej wartości, ponieważ wartość transparent jest domyślną wartością właściwości background-color).

W selektorach czasu animacji możemy określać więcej różnych wartości, różnych właściwości CSS, dzięki czemu możemy tworzyć bardziej skomplikowanie wyglądające animacje CSS3.

@keyframes moja_animacja
{
  0% { background-color:white; width:450px; color:red; }
  25% { background-color:gold; }
  50% { background-color:red; color:blue; }
  75% { background-color:green; width:300px; }
  100% { background-color:white; width:450px; }
}

Rezultat:

przykładowy element - div

Selektory procentowe, które znajdują się w regule @keyframes mogą być różnie nazywane. W tym kursie CSS będą one nazywane selektorami czasu animacji.

W następnej części kursu CSS zapoznamy się bliżej z właściwościami CSS, dzięki którym możemy wpływać na cechy wyglądu animacji.