HTML & CSS

 OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION 4

Opgave 4 - Transition & Transform

Opgave 4 – Del 1

Her skal vi lære at ændre på formater
  • Lav et nyt dokument
  • Lav 1 div boks i din body. Bruger du Codepen så sæt en div i din HTML boks
  • Tildel den klassen box1. Således: < div class=”box1″ >
  • Gå op i dit CSS og lav din klasse til .box1{}
    Den skal indeholde: width, height og background
    Du vælger selv px str og farve 🙂 
Nu skal du gøre boksen animerbar. Tilføj dette til .box1{}:

transition: width 1s, height 1s; 

Med transition kan vi ændre på width og height. og hvor mange sekunder den skal være om at lave transitionen.

Opgave 4 – Del 2

Gå op i CSS’en igen og skriv nu dette afsnit ind 
Her fortæller vi at boksene skal vokse med 200px i bredden og højden når vi holder musen over den.

.box1:hover {
  width: 200px;
  height: 200px; 
}

 

Opgave 4 – Del 3

Gå op i CSS’en igen og tilføj dette til transition, så der står: 
Her fortæller vi at boksene skal transformere sig på 2 sekunder fra de 50px til 200px i bredden og højden når vi holder musen over den i .box1:hover{}.

.box1{
  width: 50px;
  height: 50px;
  background: hotpink;
  transition: width 1s, height 1s, transform 2s;
}

Opgave 4 – Del 4

Gå op i CSS’en igen og tilføj sidste linje til .box1:hover{}
 transform: rotate(180deg);   

 

   
     

Her under vises/eksekveres koden

   
 

INFO: Hold musen over boksen(hover over the box) for at se forvandlingen