Uke 40-43

Vi har laget løsninger på animasjonsoppgaver.
Du skal kunne lage enkle animasjoner som vist under:

#propell {
   /* egenskaper for propellen */
   background-color: black;
   /* lurt å ta med de du skal animere */
   transform: rotate(0turn);
   animation: spinn 2s linear infinite;
}

@keyframes spinn {
  100%  { transform: rotate(1turn); }
}

Merk at for enkle animasjoner trenger du ofte bare en keyframe på 100%, da vil egenskapen som animeres starte på det du har satt i css
transform: rotate(0turn);
og endres mot keyframe på 100% som setter slutt-tilstanden.
transform: rotate(1turn);
For bedre styring kan du legge til så mange keyframes du måtte ønske.

Merk at du kan endre på flere egenskaper samtidig:

@keyframes colorSpinn {
  100%  { 
     transform: rotate(1turn); 
     background-color: red;
  }
}

Da propellen starter med svart - vil vi får en overgang fra svart til rødt.

Flere valg for animation

animate: navnPaaKeyframes  
         tidsbruk     varighet 1s, 200ms osv       
         delay        pause før anim starter
         ease-metode  default er ease
                      linear, ease, ease-in, ease-out
                      steps, cubic-bezier
         antall-reps  default er 1
         retning      default er normal)
                      reverse,alternate,alternat-reverse
         fill-mode    default er none
                      forwards,backwards,both
         play-state   default running
                      paused

/*  eksempel */

animate: roll 1s 2s linear paused;
/* venter 2s, varer 1s, starter ikke automatisk */
/*  typisk vil vi bruke kode til å endre playstate */

Flere valg for animation#

Flere valg for animation