Bardzo szybki CSS - animacja, która "zostaje"

Tworzymy animację przesuwania się, która wykona się jeden raz i „zostanie”, nie wróci do pozycji początkowej, tylko zostanie tam, gdzie się skończyła. Poznajemy właściwość animation-fill-mode ustawioną na forwards.

W HTMLu mamy tylko koło, które będziemy chcieli przesunąć na przykład w prawo. Za koło robi div, którego niebawem ostylujemy:

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

Teraz tradycyjnie reset stylów, flexbox dla wycentrowania, ostylowanie diva na koło:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
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;
}

Okej, tworzymy animację przesuwania się w prawo. Ma się wykonać 1 raz.

.circle {
(...)
 animation: moveright 1s ease-in 1;
}

@keyframes moveright {
    from {transform: translateX(0);}
    to {transform: translateX(100px);}
}

Zaczynamy z zerowym przesunięciem na osi X, kończymy z przesunięciem o 100px. Liczba dodatnia – przesuwamy w prawo, zgodnie z rosnącą strzałką (na pewno choć 1 raz widzieliśmy osie X i Y na matematyce).

Dobra, teraz mamy takie coś – animacja moveright trwa 1 sekundę, ease-in, wykonana 1 raz. Po czym następuje gwałtowny przeskok do pozycji początkowej.

Jeżeli chcemy, aby nasz element „został” tam, gdzie został przesunięty (albo utrzymał wielkość, do jakiej go zwiększono, albo kolor, do którego go przemieniono i tak dalej) to musimy wypełnić właściwość animation-fill-mode na 'forwards’:

.circle {
(...)
animation: moveright 1s ease-in 1;
animation-fill-mode: forwards;    
}

Tyle wystarczy, aby element został takim, jakim był podczas kończenia animacji.

Bardzo szybki CSS – animacja, która „zostaje”