Animacja, czyli @keyframes

 Co to jest to Keyframes Animation Syntax? Jest to, najprostszymi słowami, animacja.

Ma ona 7 wartości, są to:

― animation-name → nazwa

― animation-duration → czas trwania [np. 1s, .3s]

― animation-iteration-count → ilość powtórzeń [infinite lub 1, 2, 3...]

― animation-direction → kierunek powtarzania i rozpoczęcia się [normal, reverse, alternate]

― animation-timing-function → tempo [ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2)]

― animation-delay → opóźnienie lub przyspieszenie [np. .3s, 2s]

Podstawowe ułożenie wartości w kodzie, z którego najczęściej korzystam osobiście, wygląda tak:

.nazwa-elementu {

    /*-jakiś kod elementu-*/

    animation-name: nazwa animacji;

    animation-duration: 1s;

    animation-iteration-count: infinite;

    animation-delay: .3s; /*-czasami, zależy od rodzaju-*/

}

@keyframes nazwa-animacji {

    0% {}

    100% {}

}

Lista wartości, które można animować za pomocą @keyframes > klik.

Przejdźmy teraz do przykładów.

I. Lata nam kwadrat!

Jedyne co zmieniamy w tym przykładzie to zmiana położenia kwadratu za pomocą wartości top i left. Można wykorzystać do tego np. tylko top lub samo left.

#box {
  position: absolute;
  top: 1em;
  left: 1em;
  animation: lata_kwadrat;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes lata_kwadrat {
  0% {
    top: 1em;
    left: 1em;
  }
  50% {
    top: 4em;
    left: 4em;
  }
  100% {
    top: 1em;
    left: 1em;
  }
}

II. Kręci się jak szalony!

Tutaj widzimy, że kwadrat kręci się w kółko. Jest to zrobione za pomocą wartości transform: rotate();.

#box {
  position: absolute;
  top: 10em;
  left: 10em;
  animation: kreci_sie;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes kreci_sie {
  100% {
    transform: rotate(360deg);
  }
}

III. Mniejsze, większe, mniejsze, większe...

Zmiana wartości transform: scale().

#box {
  position: absolute;
  top: 10em;
  left: 10em;
  animation: mniejsze_wieksze;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes mniejsze_wieksze {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);    
  }
  100% {
    transform: scale(1);
  }
}

Jest to jako takie proste(moim zdaniem - oczywiście). W liście - podlinkowanej - na samym początku, macie wszystkie elementy, które można animować. Próbujcie, metodą prób i błędów, a w końcu będziecie robić super rzeczy.

Jak zawsze, jeśli macie jakieś pytania - piszcie w komentarzach!