HTML & CSS

 OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION 2

Opgave 2 - Animer en kasse til at flytte sig

Opgave 2 – Del 1

Nu skal vi prøve at få kassen til at bevæge sig
Gå op i den CSS og tilføj dette til din .div1:
position: relative;
Juster også på duration sæt den op til 8 sekunder.
 
Ved at sætte position til relativ, kan vi i @keyframes test{} tilføje retninger som kassen skal bevæge sig i.

Opgave 2 – Del 2

Nu skal vi kigge på @keyframes test{}
Vi skal have tilføjet nogle retninger som kassen skal gå. Det gøres i forlængelse med farven. I dette eksempel er der tilføjet retninger så kassen bevæger sig i rundt i en firkant.

Ret din @keframes test{} til dette:
@keyframes test {
     0% {background-color:black; left:0px; top:0px;}
     25% {background-color:yellow; left:200px; top:0px;}
     50% {background-color:green; left:200px; top:200px;}
     75% {background-color:blue; left:0px; top:200px;}
    100% {background-color:purple; left:0px; top:0px;}
}

Lad os tage det i bider:
  • Ved 0% starter den i toppen af venstre hjørne.
  • Ved 25% går den 200px til højre.
  • Ved 50% går den videre ned 200 px. Altså skal den have kordinaterne left:200px og top:200px
  • Ved 75% rykker den fra sidste punkt i retning mod venstre
  • Ved 100% rammer den igen toppen af venstre hjørne.
   
     

Her under vises/eksekveres koden

   
 








Opgave 2 – Del 3

Kod en gentagelse af din animation

Gå op i den CSS og tilføj dette til din .div1:
animation-iteration-count: 5;

Ved at sætte animation-iteration-count til 5 afspilles din animation 5 gange. 

BONUS: Hvis du vælger at skrive:
 infinite vil din animation kører for evigt – i et loop 
reverse vil din animation kører baglæn1 gang
alternate vil din animation kører først fremad så baglæns 1 gang
alternate-reverse vil din animation kører først fremad så baglæns 1 gang bare omvendt.