OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION 1 – INTRO
Opgave 1 - INTRO til Animation med HTML & CSS
Hvis du bruger Codepen, hop da videre og start ved Opgave 1 - Del 2
Opgave 1 – Del 1
Start her:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
Opgave 1 – Del 2
- Sæt en div ind i din body. Hvis du arbejder med codepen så i din HTML boks
Giv den klassen: class=”div1″
-
Skriv dette ind:
.div1 {
width: 100px;
height: 100px;
background-color: black;
animation: test 4s linear infinite;
}Lad os tage det i bider:
- Med width definerer vi bredden.
- Med height definerer vi højden.
- Med background-color får den en baggrundsfarve
- Med animations-name giver vi den navnet der referes til ved @keyframes
- Med animation-duration fortæller vi hvor lang tid kassen skal bruge på at skifte farve. her er det 4 sekunder(4s)
Opgave 1 – Del 3
I style skal du nu tilføje dette:
@keyframes test {
from {background-color: black;}
to {background-color: purple;}
}
Hvis du kender lidt til GIF eller Video så ved du at de er sat sammen med en masse billeder. Hvert billede kaldes en keyframe eller frame. Her fortæller @keyframes test {} så at der skal laves en masse billeder efter hinanden i nuancer, der gradvist giver os en visning fra en farve til en anden.
Her under vises/eksekveres koden
OBS: Dette vil ikke virke i Internet Explorer 9 og tidligere versioner.
Når animationen er færdig, retunerer den til sin oprindelige start.
Opgave 1 – Del 4
Hvis du vil lege lidt med overgangene i din animation så kan du tildele den flere farver og angive hvornår i animationen de skal vises.
Skriv dette ind:
@keyframes test {
0% {background-color: black;}
25% {background-color: green;}
50% {background-color: blue;}
100% {background-color: purple;}
}
Prøv at lave et regnbueskift fx.