Bardzo szybki CSS – alternate animation direction

Nauczymy się robić animacje, które działają „w dwie strony” na przykładzie elementu, który rośnie i maleje. Zrobimy to korzystając z animation direction ustawionego na alternate, czyli tak, jak się to robić powinno, zamiast stosować różne obejścia.

Tworzymy div circle:

<div class="circle"></div>

Resetujemy style, centrujemy elementy wewnątrz body, tworzymy koło:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
body {
 height: 100vh;
 background-color: aliceblue;
 display: flex;
 justify-content: center;
 align-items: center;
}
.circle {
 width: 200px;
 height: 200px;
 border-radius: 50%;
 background-color: tomato;
}

Tworzymy animację rośnięcia:

@keyframes grow {
    0% {
        transform: scale(1);
      }
      100% {
        transform: scale(2);
      }
}

Dodajemy do koła:

.circle {
(...)
animation: grow 2s linear infinite;
}

Teraz nasze koło będzie rosnąć, a następnie przeskakiwać nagle do najmniejszej wielkości i dalej rosnąć. Wystarczy jedną linijkę dodać, z animation state alternate, aby nasze koło rosło a następnie malało i dopiero kontynuowało animację – takie jest założenie tego stanu:

.circle {
(...)
animation: grow 2s linear infinite;
animation-direction: alternate;
}

Już. Nic więcej nie trzeba. To samo dzieje się z innymi animacjami, np. przesuwająca element z lewej strony na prawo teraz będzie „wracała” zanim zacznie kontynuować następną iterację animacji i tak dalej.