Animasjon med css

I eksemplet under skal vi bruke tre forskjellige metoder til å animere elementer.

Vi lager en ny tom html side (nytt prosjekt i en ny mappe) som vi kaller animasjon.html
Som vanlig starter vi med ! (emmet abbreviation) som gir oss grunnlaget til en html-side.

Vi skifter title på dokumentet til animasjon, legger til en link:css (emmet) og gir css filen navnet animasjon.css.
(Denne framgangsmåten er forklart i detalj i HTML kapittelet.

I body skriver vi inn følgende html:

<div id="main">
  <div id="himmel">
    <div id="spurv"></div>
    <div id="sol"></div>
  </div>
  <div id="jord">
    <div id="person"></div>
    <div id="kaktus"></div>
  </div>
</div>

I animasjon.css skal vi skrive følgende:

  #main {
    width: 98vw;
    height: 98vh;
  }

  #himmel {  /* øverst på skjermen */
    position: relative;
    height: 60%;
    background-color:rgb(104, 104, 241);  /* lys blå */
  }

  #jord { /* nederst på skjermen */
    position: relative;
    height: 38%;
    background-color: rgb(207, 153, 90);
  }

  #sol {
      position: absolute;
      /* metoden under garanterer at solen står midt på himmelen 
        uansett hvordan bruker endrer størrelse på displayet */
      top: calc(50% - 20px);
      left: calc(50% - 20px);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: yellow;
  }

Foreløpig vil du bare se en sol som står midt på himmelen over en brun ørken.

Enkel keyframe animasjon

Vi skal nå animere solen , den skal variere littegrann i størrelse:

#sol {
      animation: blink 1s alternate linear infinite;
}

@keyframes blink {
    100% { transform: scale(0.87); }
}

Navnet blink i animation: blink 1s alternate linear infinite; er valgt fritt, skal være beskrivende.
Du kan forenkle animasjonen til animation: blink 1s; , men da kjøres den bare en gang.
alternate animasjone kjøres først framover og deretter tilbake.
1s animasjonen bruker 1s på å endre størrelse fra 100% til 87%
linear endringen skal skje jevt, deault er ease-in-out.
infinite antall ganger animasjonen skal kjøres, her kan du skrive et tall, eller som her - uendelig.

@keyframes blink : her legger vi inn nøkkelbilder forVi skal nå animere solen , den skal variere littegrann i størrelse: animasjonen.
Her angir vi med % hvor langt ut i animasjonen egenskapen gjelder for.
Vi har bare angitt 100% - da vil animasjonen gå fra gjeldende verdi (vanlig scale) til en scale på 0.87 == 87%.

Sprite-sheet animasjon

Vi skal nå legge til en figur som skal vandre over ørkenen. Til dette finner vi en sprite-sheet på nett:

Jeg søkte på puppet sprite sheet walking png og fant dette bilet:

(free to use).

Vi skal bruke rad 3 til å lage en gå-animasjon - en figur som vandrer over ørkenen.
Du kan finne denne filen på nettet - eller lagre bildet over, css koden under virker dersom du lagrer bildet i prosjektmappa
med navnet puppet.png .

#person {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 112px;
  height: 112px;
  background-image: url("puppet.png");
}

Dersom du åpner nettsida (animasjon.html) i en nettleser skal du se omtrent følgende:

Legg merke til at vi ser første bilde fra rad 1. Dette må vi nå endre på:
Legg til disse to linjene i css for #person (nederst før siste } )

  background-position-x: 0;
  background-position-y: calc(-112px * 2);

calc(-112px * 2) flytter bildet opp 2 rader slik at første frame fra rad 3 er inne i rammen person.

Nå lager vi animasjonen som vi kaller walk.
Skriv inn denne linja neders i #person

animation: walk 1s steps(8) infinite;

Under #person i css filen skal vi lage keyframes for walk

@keyframes walk {
   100% { background-position-x: calc( -112px * 8 ); }
}

Her endrer vi bakgrunnsposisjonen slik at vi viser alle 8 bildene - dette virker pga steps(8) trinnvis.
Uten steps(8) blir effekten en helt annen (prøv selv).

Hvert bilde i animasjonen blir vist i 1/8 s, deretter flyttes neste bilde inn i rammen, overgangen er så rask at det for vårt øye virker øyeblikkelig. Effekten er som å lage tegnefilm med en kladdebok.

Javascript og transition animasjon

Nå skal vi bruke en tredje metode til å animere en kaktus over skjermen (slik at det ser ut som om figuren går over ørkenen).

Igjen må vi finne et bilde (med fri lisens) , eller vi kan tegne selv. Jeg fant dette bildet ved å søke på

png cactus free transparent - jeg har skalert det ned til 90px i største dimensjon.

Vi skriver inn denne css-koden for #kaktus:

#kaktus {
    position: absolute;
    opacity: 0;
    top : 30px;
    left: 100%;
    width: 68px;
    height: 90px;
    background-image: url("cactus.png");
    transition: left 9s linear;
    will-change: left;   /* et hint til browseren om at left endrer seg ofte */
    /* browseren kan da optimalisere animasjonen */
}

#kaktus.ut {
    left: -100px;
    opacity: 1;
}

Nå må vi legge inn litt javascript, se Javascript for hvordan du legger denne filen inn i html.

function setup() {
    let kaktus = document.getElementById("kaktus");
    animerKaktus();

    function animerKaktus() {
        kaktus.classList.toggle("ut");
        setTimeout(animerKaktus, 9200);
    }

}

Her har vi brukt javascript til å trigge transition, men den kan også trigges av en endring i en css-regel ved å bruke css-selectors slik som :hover til å endre en egenskap (denne blir da styrt av en trasition).

Du kan se et eksempel på det i css-selectors