Animowane elementy HTML - CSS3

W tej części kursu CSS zajmiemy się utworzeniem animowanych elementów HTML.

Końcowy efekt został zaprezentowany poniżej.

ANIMACJA

W naszym pierwszym kroku utworzymy potrzebny układ elementów HTML, w kodzie HTML. Umieścimy tekst ANIMACJA w elemencie div, do którego dodamy jakiś przykładowy atrybut id, a następnie każdą literę tekstu ANIMACJA, umieścimy w elemencie span, któremu nadamy unikalny atrybut id, dzięki czemu w następnym kroku będziemy mogli utworzyć osobne reguły CSS dla każdego elementu span.

Cała operacja została zaprezentowana w kodzie HTML, który znajduje się poniżej:

<body>

  <div id="rodzic">
    <span id="dziecko1">A</span><span id="dziecko2">N</span><span id="dziecko3">I</span><span id="dziecko4">M</span><span id="dziecko5">A</span><span id="dziecko6">C</span><span id="dziecko7">J</span><span id="dziecko8">A</span>
  </div>

</body>

Rezultat:

ANIMACJA

Czas utworzyć odpowiednie reguły CSS, które dodadzą trochę właściwości CSS do elementu div oraz elementów span.

#rodzic {
  width:448px;
  height:46px;
  font-size:24px;
  margin:0 auto;
  text-align:center;
}

#rodzic > span {
  display:block;
  float:left;
  width:40px;
  line-height:40px;
  margin:0 5px;
  border:3px solid #FDD700;
  background-color:#FFF;
  border-radius:6px;
}

Rezultat:

ANIMACJA

Wszystkie właściwości CSS, które zostały użyte w regułach CSS zaprezentowanych kilka linijek wyżej, pojawiły się już wcześniej w tym dziale kursu CSS, więc nie powinny być one dla Ciebie niczym nowym. Najważniejsze z nich wyjaśnię poniżej, ponieważ na szczególną uwagę zasługuje zapis width:448px;

Selektor #rodzic > span odwołuje się do wszystkich dzieci elementu #rodzic, które są elementami span. Właściwość display:block; sprawia, że wspomniane elementy span będą interpretowane przez przeglądarkę internetową jako elementy wyświetlane w bloku (jeden pod drugim). Dzięki właściwości float:left; nasze elementy blokowe zostały umieszczone jeden obok drugiego.

Aby wyśrodkować cały układ naszych elementów HTML musimy znać całkowitą szerokość wszystkich elementów span (jest ich w tym wypadku 8). Dzięki czemu, po dodaniu do elementu #rodzic właściwości width wraz z odpowiednią wartością oraz właściwości margin:0 auto; cały układ elementów HTML zostanie wyśrodkowany.

Aby obliczyć szukaną wartość całkowitej szerokości, musimy zwrócić uwagę na te właściwości CSS, które powiększają szerokość elementu span, czyli właściwości width, margin, padding, border.

W elementach span, w naszym układzie HTML, tymi właściwościami są właściwości width:40px; margin:0 5px; oraz border:3px solid #FDD700;

Po ułożeniu następującego równania (40px + 5px × 2 + 3px × 2) × 8 otrzymujemy potrzebną wartość całkowitej szerokości, która w tym wypadku wynosi 448px.

Poniżej zostały opisane poszczególne wartości jakie użyliśmy w naszym równaniu.

  • 40px - jest to wartość właściwości width:40px; która określa szerokość elementu HTML
  • 5px × 2 - wartość 5px jest to wartość właściwości margin:0 5px; która określa wartości marginesów zewnętrznych elementu HTML, pomnożyliśmy tą wartość przez 2, bo interesuje nas wartość lewego i prawego marginesu zewnętrznego elementu HTML
  • 3px × 2 - wartość 3px jest to wartość właściwości border:3px solid #FDD700; która określa wartość szerokości obramowania elementu po jego każdej stronie, pomnożyliśmy tą wartość przez 2, bo interesuje nas wartość szerokości lewego i prawego obramowania elementu HTML
  • wszystkie wyżej wymienione wartości, po dodaniu do siebie, dadzą nam wartość całkowitej szerokości jednego elementu span, a my mamy tych elementów 8, w naszym kodzie HTML, a więc wspomnianą wartość całkowitej szerokości jednego elementu span mnożymy przez 8 i otrzymujemy szukaną wartość 448px

Czas zająć się wyglądem naszej animacji, którą utworzymy za pomocą reguły @keyframes.

@keyframes animowany_tekst
{
  0% { transform:rotate(0); }
  10% { transform:rotate(360deg); }
  100% { transform:rotate(360deg); }
}

Po dodaniu do wszystkich elementów span, za pomocą właściwości animation:animowany_tekst 5s linear infinite; oraz selektora #rodzic > span, reguły @keyframes, którą utworzyliśmy powyżej, uzyskamy następujący efekt:

ANIMACJA

Efekt jest nieco inny niż ten zaprezentowany na początku tej części kursu CSS, jednak zanim to zmienimy, musimy wyjaśnić sobie zapisy, które się pojawiły.

Właściwość animation:animowany_tekst 5s linear infinite; sprawia, że do elementu HTML zostaje dodana animacja o nazwie animowany_tekst (którą wcześniej utworzyliśmy za pomocą reguły @keyframes), animacja trwa 5 sekund (5s), ma stałe tempo (linear) oraz powtarza się w nieskończoność (infinite).

Przyjrzymy się teraz naszej regule @keyframes.

@keyframes animowany_tekst
{
  0% { transform:rotate(0); }
  10% { transform:rotate(360deg); }
  100% { transform:rotate(360deg); }
}

W animacji animowany_tekst będzie brała udział tylko jedna właściwość CSS, czyli właściwość transform, która wpływa na styl przekształcenia elementu HTML.

Zapis 0% { transform:rotate(0); } określa jaką wartość właściwości transform, ma mieć nasz element span na starcie animacji animowany_tekst.

Zapis 10% { transform:rotate(360deg); } określa w jaki sposób wartość właściwości transform, ma się zmienić, od początku animacji, do 10% czasu wykonywania się całej animacji, czyli do połowy pierwszej sekundy, bo 10% z 5s, to 500ms, czyli 0.5s.

Zapis 100% { transform:rotate(360deg); } określa w jaki sposób wartość właściwości transform, ma się zmienić, od 10% czasu wykonywania się całej animacji, do 100% czasu wykonywania się całej animacji, czyli od połowy pierwszej sekundy, do ostatniej sekundy. Ostatnią sekundą w naszej animacji jest sekunda 5, ponieważ określiliśmy ją za pomocą właściwości animation:animowany_tekst 5s linear infinite;

W praktyce nasza animacje będzie obracać, o 360 stopni, każdy element HTML, do którego zostanie ona dodana. Obrót będzie odbywał się w przestrzeni 2D, dzięki funkcji rotate(), która jest wartością właściwości transform.

ANIMACJA

Nasz dotychczasowy efekt, jak już wcześniej wspomniałem, różni się nieco od tego, który został przedstawiony na początku tej części kursu CSS, oraz który został zaprezentowany poniżej:

ANIMACJA

Aby uzyskać powyższy efekt, musimy sprawić, aby animacja, dla każdego pojedynczego elementu span, została opóźniona o odpowiednią wartość czasu, dzięki właściwości animation-delay.

Przyjrzyjmy się jeszcze raz regule @keyframes animowany_tekst.

@keyframes animowany_tekst
{
  0% { transform:rotate(0); }
  10% { transform:rotate(360deg); }
  100% { transform:rotate(360deg); }
}

Nasza animacja trwa pięć sekund, dzięki zapisowi animation:animowany_tekst 5s linear infinite; lecz tak naprawdę wykonuje się on tylko przez 10% tego czasu, czyli przez 500ms, ponieważ reguła @keyframes informuje przeglądarkę internetową, że od 10% czasu wykonywania się animacji, do jej końca, czyli 100%, właściwość transform ma mieć tą samą wartość, a tą wartością jest wartość rotate(360deg). Dlatego przez cztery i pół sekundy (4500ms) nasza animacja jest w bezruchu.

Gdy dodamy do każdego elementu span właściwość animation-delay wraz z odpowiednią wartością, to animacja dla danego elementu HTML zostanie opóźniona o tą wartość.

Jeżeli będziemy dodawać właściwość animation-delay do każdego kolejnego elementu span wraz z wartością różniącą się o tą samą wielkość, np. o 250ms, to uzyskamy dość płynny efekt naszej animacji. Będzie ona wykonywać się z małym opóźnieniem dla każdego elementu span. Wspomniana wartość opóźnienia nie powinna przekroczyć wartości 4500ms, ponieważ nasza animacji straci swoją płynności, czyli nie zakończy się dla wszystkich elementów HTML, przed ponownym rozpoczęciem.

#rodzic > #dziecko1 {
  animation-delay:250ms;
}

#rodzic > #dziecko2 {
  animation-delay:500ms;
}

#rodzic > #dziecko3 {
  animation-delay:750ms;
}

#rodzic > #dziecko4 {
  animation-delay:1000ms;
}

#rodzic > #dziecko5 {
  animation-delay:1250ms;
}

#rodzic > #dziecko6 {
  animation-delay:1500ms;
}

#rodzic > #dziecko7 {
  animation-delay:1750ms;
}

#rodzic > #dziecko8 {
  animation-delay:2000ms;
}

Rezultat:

ANIMACJA

Kod dokumentu HTML został umieszczony poniżej:

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

    <style>
      #rodzic {
        width:448px;
        height:46px;
        font-size:24px;
        margin:0 auto;
        text-align:center;
      }

      #rodzic > span {
        display:block;
        float:left;
        width:40px;
        line-height:40px;
        margin:0 5px;
        border:3px solid #FDD700;
        background-color:#FFF;
        border-radius:6px;
        animation:animowany_tekst 5s linear infinite;
        -webkit-animation:animowany_tekst 5s linear infinite;
      }

      #rodzic > #dziecko1 {
        animation-delay:250ms;
        -webkit-animation-delay:250ms;
      }

      #rodzic > #dziecko2 {
        animation-delay:500ms;
        -webkit-animation-delay:500ms;
      }

      #rodzic > #dziecko3 {
        animation-delay:750ms;
        -webkit-animation-delay:750ms;
      }

      #rodzic > #dziecko4 {
        animation-delay:1000ms;
        -webkit-animation-delay:1000ms;
      }

      #rodzic > #dziecko5 {
        animation-delay:1250ms;
        -webkit-animation-delay:1250ms;
      }

      #rodzic > #dziecko6 {
        animation-delay:1500ms;
        -webkit-animation-delay:1500ms;
      }

      #rodzic > #dziecko7 {
        animation-delay:1750ms;
        -webkit-animation-delay:1750ms;
      }

      #rodzic > #dziecko8 {
        animation-delay:2000ms;
        -webkit-animation-delay:2000ms;
      }

      /*------------------------ANIMACJA------------------------*/
      @keyframes animowany_tekst
      {
        0% {transform:rotate(0);}
        10% {transform:rotate(360deg);}
        100% {transform:rotate(360deg);}
      }

      @-webkit-keyframes animowany_tekst
      {
        0% {-webkit-transform:rotate(0);}
        10% {-webkit-transform:rotate(360deg);}
        100% {-webkit-transform:rotate(360deg);}
      }

    </style>

  </head>

<body>

  <div id="rodzic">
    <span id="dziecko1">A</span><span id="dziecko2">N</span><span id="dziecko3">I</span><span id="dziecko4">M</span><span id="dziecko5">A</span><span id="dziecko6">C</span><span id="dziecko7">J</span><span id="dziecko8">A</span>
  </div>

</body>
</html>

Nasz kod możemy nieco poprawić, korzystając z selektorów CSS3, np. z selektora nth-child:(), dzięki czemu zredukujemy atrybuty id.

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

    <style>
      #rodzic {
        width:448px;
        height:46px;
        font-size:24px;
        margin:0 auto;
        text-align:center;
      }

      #rodzic > span {
        display:block;
        float:left;
        width:40px;
        line-height:40px;
        margin:0 5px;
        border:3px solid #FDD700;
        background-color:#FFF;
        border-radius:6px;
        animation:animowany_tekst 5s linear infinite;
        -webkit-animation:animowany_tekst 5s linear infinite; /* dla Google Chrome, Safari, Opera 15+ */
      }

      #rodzic > span:nth-child(1) {
        animation-delay:250ms;
        -webkit-animation-delay:250ms;
      }

      #rodzic > span:nth-child(2) {
        animation-delay:500ms;
        -webkit-animation-delay:500ms;
      }

      #rodzic > span:nth-child(3) {
        animation-delay:750ms;
        -webkit-animation-delay:750ms;
      }

      #rodzic > span:nth-child(4) {
        animation-delay:1000ms;
        -webkit-animation-delay:1000ms;
      }

      #rodzic > span:nth-child(5) {
        animation-delay:1250ms;
        -webkit-animation-delay:1250ms;
      }

      #rodzic > span:nth-child(6) {
        animation-delay:1500ms;
        -webkit-animation-delay:1500ms;
      }

      #rodzic > span:nth-child(7) {
        animation-delay:1750ms;
        -webkit-animation-delay:1750ms;
      }

      #rodzic > span:nth-child(8) {
        animation-delay:2000ms;
        -webkit-animation-delay:2000ms;
      }

      /*------------------------ANIMACJA------------------------*/
      @keyframes animowany_tekst
      {
        0% {transform:rotate(0);}
        10% {transform:rotate(360deg);}
        100% {transform:rotate(360deg);}
      }

      @-webkit-keyframes animowany_tekst /* dla Google Chrome, Safari, Opera 15+ */
      {
        0% {-webkit-transform:rotate(0);}
        10% {-webkit-transform:rotate(360deg);}
        100% {-webkit-transform:rotate(360deg);}
      }

    </style>

  </head>

<body>

  <div id="rodzic">
    <span>A</span><span>N</span><span>I</span><span>M</span><span>A</span><span>C</span><span>J</span><span>A</span>
  </div>

</body>
</html>

Generalnie rzecz biorąc, każda animacja CSS3 będzie inaczej zbudowana, będzie miała inny właściwości CSS, inne selektory czasu w regule @keyframes. Tłumaczenia każdej takiej animacji, rozbieranie jej na czynniki pierwsze, mija się trochę z celem. Więcej i szybciej nauczymy się, gdy sami zaczniemy eksperymentować z animacjami CSS3.

W kolejnych częściach tego działu będziemy kontynuowali temat animacji CSS3.