OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION 3
Opgave 3 - Glidende overgang
Opgave 3 – Del 1
- Lav et nyt dokument
- Lav 5 div bokse i din body
- Tildel dem alle klassen div1
- Tildel dem også id=”” hhv. således:
< div class=”baggrund” >
< div class=”div1″ id=”div1″ > linear < /div >
< div class=”div1″ id=”div2″ > ease < /div >
< div class=”div1″ id=”div3″ > ease-in < /div >
< div class=”div1″ id=”div4″ > ease-out < /div >
< div class=”div1″ id=”div5″ > ease-in-out < /div >
< /div >
Gå op i den CSS og lav bagrunden:
.baggrund{
height: ;
width: 300px;
border:1px solid black;
}
Height er ikke defineret her, fordi det ikke er nødvendigt, da div boksene inden i sætter størrelsen, alt efter hvor høje de er tilsammen. Så du kan undlade at skrive den ind.
Opgave 3 – Del 2
Nu skal vi lave .div1 som styrer udseendet på dem alle
Ved animation: mymove 5s infinte; referer vi til en funktion vi laver om lidt. Hvor vi sætter boksene til at bevæge sig fremad – fra venstre og til højre
Man kan vælge af afrunde hjørnerne, ved at tilføje linjen border-radius: 10px;
Opgave 3 – Del 3
Nu skal vi kode glidende overgange til alle 5 kasser
linear
ease
ease-in
ease-out
ease-in-out
Gå op i den CSS og tilføj dette:
# div1 {animation-timing-function: linear; }
# div2 {animation-timing-function: ease; }
# div3 {animation-timing-function: ease-in; }
# div4 {animation-timing-function: ease-out; }
# div5 {animation-timing-function: ease-in-out; }
Opgave 3 – Del 4
Gå op i CSS’en og skriv nu dette afsnit ind
Her fortæller vi at boksene skal gå fra 0 og 200px frem
@keyframes mymove {
from {margin-left: 0px;}
to {margin-left: 200px;}
}