HTML & CSS

 OPGAVE TIL HTML & CSS – ADVANCED – ANIMATION – ADVANCED 2

Opgave 2

Opgave 2 – Del 1

  • Åben en ny PEN i CODEPEN.IO
  • Start med at lave den yderste div boks med klassen morfing1
< div class=”morfing1″ >< /div >
 
Nu skal du tilføje klassen for body i din CSS.
body {
  background-color: black;
}

Opgave 2 – Del 2

Vi bliver i CSS’en og laver nu klassen for morfing1.

  • Gå ned i dit CSS og lav din klasse til morfing1. 
.morfing1 {
  position: absolute;
  height: 310px;
  width: 530px;
  padding: 10px;
  margin-top: 10%;
  margin-left: 25%;
  background-color: white;
  /*mask gør at alt ud over højde og vidde på denne boks ikke vises*/
  -webkit-mask-image: radial-gradient(white 100%, rgba(0, 0, 0, 0.1) 50%);
  mask-image: radial-gradient(square, black 100%, rgba(0, 0, 0, 0.5) 50%);
}

Opgave 2 – Del 3

Vi går op i HTML’en igen. Nu skal vi lave de 11 div bokse(børn) i morfing1, som skal være de firkanter der transformeres under animationen. Det kommer til at se således ud:

< div class=”morfing1″ >
     < div class=”morfing1-sq1″ >< /div >
     < div class=”morfing1-sq2″ >< /div >
     < div class=”morfing1-sq3″ >< /div >
     < div class=”morfing1-sq4″ >< /div >
     < div class=”morfing1-sq5″ >< /div >
     < div class=”morfing1-sq6″ >< /div >
     < div class=”morfing1-sq7″ >< /div >
     < div class=”morfing1-sq8″ >< /div >
     < div class=”morfing1-sq9″ >< /div >
     < div class=”morfing1-sq10″ >< /div >
     < div class=”morfing1-sq11″ >< /div >
< /div >
  • Gå ned i dit CSS og lav din klasse til morfing1-sq1.
.morfing1-sq1 {
  position: absolute;
  height: 200px;
  width: 100px;
  background-color: #CD2CF0;
  animation: sq1 20s linear infinite;
}

Opgave 2 – Del 4

Vi bliver i CSS’en og laver nu keyframen til animationen vi kaldte på i morfing1-sq1.

  • Gå ned i dit CSS og lav din keyframe til animationen sq1.
@keyframes sq1 {
  0% {height: 200px; width: 100px;border-radius:0px 0px 0px 0px;}
  10% {height: 200px; width: 100px;border-radius:50px 0px 50px 0px;}
  20% {height: 100px; width: 100px;border-radius: 50px 50px 0px 50px;}
  30% {height: 100px; width: 100px;border-radius: 50px 50px 0px 50px;}
  40% {height: 100px; width: 200px;border-radius: 50px 50px 0px 50px;}
  50% {height: 100px; width: 200px;border-radius: 50px 0px 50px 0px;}
  60% {height: 100px; width: 200px;border-radius: 50px 0px 50px 0px;}
  70% {height: 100px; width: 200px;border-radius: 50px 0px 0px 50px;}
  80% {height: 100px; width: 200px;border-radius: 50px 0px 0px 50px;}
  90% {height: 100px; width: 100px;border-radius: 50px 0px 0px 50px;}
  100% {height: 200px; width: 100px;border-radius:0px 0px 0px 0px;}
}

Opgave 2 – Del 5

Vi bliver i CSS’en og laver nu klassen morfing1-sq2.

  • Gå ned i dit CSS og lav din klasse til morfing1-sq2.
.morfing1-sq2 {
  position: absolute;
  height: 100px;
  width: 200px;
  background-color: #B00DF0;
  margin-left: 110px;
  animation: sq2 20s linear infinite;
}
 

Opgave 2 – Del 6

Vi bliver i CSS’en og laver nu keyframen til animationen vi kaldte på i morfing1-sq2.

  • Gå ned i dit CSS og lav din keyframe til animationen sq2.
@keyframes sq2 {
  0% {height: 100px;width: 200px;border-radius: 0px 0px 0px 0px;margin-left: 110px}
  10% {height: 100px;width: 200px;border-radius: 0px 50px 0px 50px;margin-left: 110px}
  20% {height: 100px;width: 100px;border-radius: 0px 0px 50px 50px;margin-left: 110px}
  30% {height: 200px;width: 100px;border-radius: 0px 0px 50px 50px;margin-left: 110px}
  40% {height: 100px;width: 100px;border-radius: 0px 0px 50px 50px;margin-left: 210px}
  50% {height: 100px;width: 100px;border-radius: 50px 0px 50px 50px;margin-left: 210px}
  60% {height: 100px;width: 100px;border-radius: 50px 0px 50px 50px;margin-left: 210px}
  70% {height: 100px;width: 100px;border-radius: 0px 0px 50px 50px;margin-left: 210px}
  80% {height: 100px;width: 100px;border-radius: 0px 0px 50px 50px;margin-left: 210px}
  90% {height: 100px;width: 200px;border-radius: 0px 0px 50px 50px;margin-left: 110px}
  100% {height: 100px;width: 200px;border-radius: 0px 0px 0px 0px;margin-left: 110px}
}

Opgave 2 – Del 7

Vi bliver i CSS’en og laver nu klassen morfing1-sq3.

  • Gå ned i dit CSS og lav din klasse til morfing1-sq3.
.morfing1-sq3 {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: #8624C7;
  margin-left: 320px;
  animation: sq3 20s linear infinite;
}
 

Opgave 2 – Del 8

Vi bliver i CSS’en og laver nu keyframen til animationen vi kaldte på i morfing1-sq3.

  • Gå ned i dit CSS og lav din keyframe til animationen sq3.
@keyframes sq3 {
  0% {height: 100px;width: 100px;border-radius: 0px 0px 0px 0px;margin-left: 320px}
  10% {height: 100px;width: 100px;border-radius: 50px 0px 50px 0px;margin-left: 320px}
  20% {height: 200px;width: 200px;border-radius: 50px 0px 50px 0px;margin-left: 220px}
  30% {height: 100px;width: 100px;border-radius: 50px 50px 50px 50px;margin-left: 220px}
  40% {height: 100px;width: 210px;border-radius: 0px 50px 50px 0px;margin-left: 320px}
  50% {height: 100px;width: 210px;border-radius: 50px 50px 50px 50px;margin-left: 320px}
  60% {height: 100px;width: 210px;border-radius: 0px 50px 50px 0px;margin-left: 320px}
  70% {height: 100px;width: 210px;border-radius: 50px 0px 50px 0px;margin-left: 320px}
  80% {height: 100px;width: 210px;border-radius: 50px 0px 50px 0px;margin-left: 320px}
  90% {height: 100px;width: 100px;border-radius: 50px 50px 50px 50px;margin-left: 320px}
  100% {height: 100px;width: 100px;border-radius: 0px 0px 0px 0px;margin-left: 320px}
}

Opgave 2 – Del 9

Vi bliver i CSS’en og laver nu klassen morfing1-sq4.

  • Gå ned i dit CSS og lav din klasse til morfing1-sq4.
.morfing1-sq4 {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: #8624AF;
  margin-top: 210px;
  animation: sq4 20s linear infinite;
}
 

Opgave 2 – Del 10

Vi bliver i CSS’en og laver nu keyframen til animationen vi kaldte på i morfing1-sq4.

  • Gå ned i dit CSS og lav din keyframe til animationen sq4.
@keyframes sq4 {
  0% {height: 100px;width: 100px;border-radius: 0px 0px 0px 0px;margin-top: 210px;}
  10% {height: 100px;width: 100px;border-radius: 50px 0px 50px 50px;margin-top: 210px;}
  20% {height: 200px;width: 100px;border-radius: 0px 0px 50px 50px;margin-top: 110px;}
  30% {height: 200px;width: 100px;border-radius: 50px 50px 50px 50px;margin-top: 110px;}
  40% {height: 200px;width: 200px;border-radius: 30px 30px 30px 30px;margin-top: 110px;}
  50% {height: 200px;width: 100px;border-radius: 0px 50px 0px 50px;margin-top: 110px;}
  50% {height: 200px;width: 100px;border-radius: 50px 0px 50px 0px;margin-top: 110px;}
  60% {height: 100px;width: 100px;border-radius: 50px 50px 50px 50px;margin-top: 110px;}
  70% {height: 100px;width: 100px;border-radius: 0px 50px 50px 0px;margin-top: 110px;}
  80% {height: 200px;width: 100px;border-radius: 30px 30px 30px 30px;margin-top: 110px;}
  90% {height: 200px;width: 100px;border-radius: 0px 50px 50px 0px;margin-top: 110px;}
  100% {height: 100px;width: 100px;border-radius: 0px 0px 0px 0px;margin-top: 210px;}
}

Opgave 2 – Del 11

Vi bliver i CSS’en og laver nu klassen morfing1-sq5.

  • Gå ned i dit CSS og lav din klasse til morfing1-sq5.
.morfing1-sq5 {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: #79408F;
  margin-top: 210px;
  margin-left: 110px;
  animation: sq5 20s linear infinite;
}
 

Opgave 2 – Del 12

Vi bliver i CSS’en og laver nu keyframen til animationen vi kaldte på i morfing1-sq5.

  • Gå ned i dit CSS og lav din keyframe til animationen sq5.
@keyframes sq5 {
  0% {height: 200px;width: 100px;border-radius: 0px 0px 0px 0px;margin-top: 110px;margin-left: 110px;}
  10% {height: 200px;width: 100px;border-radius: 50px 0px 50px 50px;margin-top: 110px;margin-left: 110px;}
  20% {height: 200px;width: 100px;border-radius: 0px 50px 0px 50px;margin-top: 110px;margin-left: 110px;}
  30% {height: 100px;width: 100px;border-radius: 50px 50px 50px 50px;margin-top: 210px;margin-left: 110px;}
  40% {height: 200px;width: 100px;border-radius: 30px 30px 30px 30px;margin-top: 110px;margin-left: 210px;}
  50% {height: 200px;width: 200px;border-radius: 0px 50px 0px 50px;margin-top: 110px;margin-left: 110px;}
  60% {height: 100px;width: 200px;border-radius: 50px 50px 50px 50px;margin-top: 110px;margin-left: 110px;}
  70% {height: 100px;width: 200px;border-radius: 0px 50px 50px 0px;margin-top: 110px;margin-left: 110px;}
  80% {height: 200px;width: 200px;border-radius: 30px 30px 30px 30px;margin-top: 110px;margin-left: 110px;}
  90% {height: 200px;width: 200px;border-radius: 0px 50px 50px 0px;margin-top: 110px;margin-left: 110px;}
  100% {height: 200px;width: 100px;border-radius: 0px 0px 0px 0px;margin-top: 110px;margin-left: 110px;}
}

Opgave 2 – Del 13

Vi bliver i CSS’en og laver nu klassen morfing1-sq6.

  • Gå ned i dit CSS og lav din klasse til morfing1-sq6.
.morfing1-sq6 {
  position: absolute;
  height: 200px;
  width: 200px;
  background-color: #96408F;
  margin-top: 210px;
  margin-left: 220px;
  animation: sq6 20s linear infinite;
}
 

Opgave 2 – Del 14

Vi bliver i CSS’en og laver nu keyframen til animationen vi kaldte på i morfing1-sq6.

  • Gå ned i dit CSS og lav din keyframe til animationen sq6.
@keyframes sq6 {
  0% {height: 200px;width: 200px;border-radius: 0px 0px 0px 0px;margin-top: 110px;margin-left: 220px;}
  10% {height: 200px;width: 200px;border-radius: 50px 0px 50px 50px;margin-top: 110px;margin-left: 220px;}
  20% {height: 100px;width: 100px;border-radius: 0px 0px 50px 50px;margin-top: 210px;margin-left: 220px;}
  30% {height: 200px;width: 100px;border-radius: 0px 0px 50px 50px;margin-top: 110px;margin-left: 220px;}
  40% {height: 200px;width: 210px;border-radius: 30px 30px 30px 30px;margin-top: 110px;margin-left: 320px;}
  50% {height: 90px;width: 210px;border-radius: 0px 50px 0px 50px;margin-top: 220px;margin-left: 320px;}
  60% {height: 90px;width: 100px;border-radius: 50px 50px 50px 50px;margin-top: 220px;margin-left: 320px;}
  70% {height: 200px;width: 110px;border-radius: 0px 0px 50px 50px;margin-top: 110px;margin-left: 320px;}
  80% {height: 200px;width: 200px;border-radius: 30px 30px 30px 30px;margin-top: 110px;margin-left: 320px;}
  90% {height: 100px;width: 90px;border-radius: 50px 0px 50px 0px;margin-top: 110px;margin-left: 330px;}
  100% {height: 200px;width: 200px;border-radius: 0px 0px 0px 0px;margin-top: 110px;margin-left: 220px;}
}

Opgave 2 – Del 15

Vi bliver i CSS’en og laver nu klassen morfing1-sq7.

  • Gå ned i dit CSS og lav din klasse til morfing1-sq7.
.morfing1-sq7 {
  position: absolute;
  height: 200px;
  width: 100px;
  background-color: #C840D6;
  margin-top: 0px;
  margin-left: 330px;
  animation: sq7 20s linear infinite;
}
 

Opgave 2 – Del 16

Vi bliver i CSS’en og laver nu keyframen til animationen vi kaldte på i morfing1-sq7.

  • Gå ned i dit CSS og lav din keyframe til animationen sq7.
@keyframes sq7 {
  0% {height: 200px;width: 100px;border-radius: 0px 0px 0px 0px;margin-top: 0px;margin-left: 430px;}
  10% {height: 200px;width: 100px;border-radius: 50px 0px 50px 50px;margin-top: 0px;margin-left: 430px;}
  20% {height: 100px;width: 100px;border-radius: 0px 0px 50px 50px;margin-top: 0px;margin-left: 430px;}
  30% {height: 200px;width: 200px;border-radius: 50px 50px 50px 50px;margin-top: 0px;margin-left: 330px;}
  40% {height: 100px;width: 0px;border-radius: 30px 30px 30px 30px;margin-top: 0px;margin-left: 530px;}
  50% {height: 100px;width: 0px;border-radius: 0px 50px 0px 50px;margin-top: 0px;margin-left: 530px;}
  60% {height: 100px;width: 0px;border-radius: 50px 50px 50px 50px;margin-top: 0px;margin-left: 530px;}
  70% {height: 200px;width: 0px;border-radius: 0px 50px 50px 0px;margin-top: 0px;margin-left: 530px;}
  80% {height: 200px;width: 0px;border-radius: 30px 30px 30px 30px;margin-top: 0px;margin-left: 530px;}
  90% {height: 100px;width: 100px;border-radius: 0px 50px 50px 0px;margin-top: 0px;margin-left: 430px;}
  100% {height: 200px;width: 100px;border-radius: 0px 0px 0px 0px;margin-top: 0px;margin-left: 430px;}
}

Opgave 2 – Del 17

Vi bliver i CSS’en og laver nu klassen morfing1-sq8.

  • Gå ned i dit CSS og lav din klasse til morfing1-sq8.
.morfing1-sq8 {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: #9D5CCC;
  margin-top: 210px;
  margin-left: 430px;
  animation: sq8 20s linear infinite;
}
 

Opgave 2 – Del 18

Vi bliver i CSS’en og laver nu keyframen til animationen vi kaldte på i morfing1-sq8.

  • Gå ned i dit CSS og lav din keyframe til animationen sq8.
@keyframes sq8 {
  0% {height: 100px;width: 100px;border-radius: 0px 0px 0px 0px;margin-top: 210px;margin-left: 430px;}
  10% {height: 100px;width: 100px;border-radius: 50px 0px 50px 50px;margin-top: 210px;margin-left: 430px;}
  20% {height: 200px;width: 100px;border-radius: 0px 0px 50px 50px;margin-top: 110px;margin-left: 430px;}
  30% {height: 100px;width: 200px;border-radius: 50px 50px 50px 50px;margin-top: 210px;margin-left: 330px;}
  40% {height: 100px;width: 0px;border-radius: 30px 30px 30px 30px;margin-top: 210px;margin-left: 530px;}
  41% {height: 0px;width: 0px;border-radius: 30px 30px 30px 30px;margin-top: 110px;margin-left: 330px;}
  43% {height: 0px;width: 210px;border-radius: 30px 30px 30px 30px;margin-top: 110px;margin-left: 320px;}
  50% {height: 100px;width: 210px;border-radius: 0px 50px 0px 50px;margin-top: 110px;margin-left: 320px;}
  60% {height: 100px;width: 210px;border-radius: 50px 50px 50px 50px;margin-top: 110px;margin-left: 320px;}
  70% {height: 0px;width: 210px;border-radius: 0px 50px 50px 0px;margin-top: 110px;margin-left: 320px;}
  75% {height: 0px;width: 0px;border-radius: 0px 50px 50px 0px;margin-top: 110px;margin-left: 430px;}
  80% {height: 50px;width: 0px;border-radius: 30px 30px 30px 30px;margin-top: 210px;margin-left: 530px;}
  90% {height: 100px;width: 100px;border-radius: 30px 30px 30px 30px;margin-top: 110px;margin-left: 430px;}
  95% {height: 100px;width: 100px;border-radius: 0px 50px 50px 0px;margin-top: 160px;margin-left: 430px;}
  100% {height: 100px;width: 100px;border-radius: 0px 0px 0px 0px;margin-top: 210px;margin-left: 430px;}
}

Opgave 2 – Del 19

Vi bliver i CSS’en og laver nu klassen morfing1-sq9.

  • Gå ned i dit CSS og lav din klasse til morfing1-sq9.
.morfing1-sq9 {
  position: absolute;
  height: 100px;
  width: 300px;
  background-color: purple;
  margin-top: 210px;
  margin-left: 0px;
  animation: sq9 20s linear infinite;
}
 

Opgave 2 – Del 20

Vi bliver i CSS’en og laver nu keyframen til animationen vi kaldte på i morfing1-sq9.

  • Gå ned i dit CSS og lav din keyframe til animationen sq9.
@keyframes sq9 {
  0% {height: 0px;width: 310px;border-radius: 0px 0px 0px 0px;margin-top: 300px;margin-left: 0px;}
  50% {height: 0px;width: 310px;border-radius: 0px 0px 0px 0px;margin-top: 310px;margin-left: 0px;}
  60% {height: 90px;width: 310px;border-radius: 50px 50px 50px 50px;margin-top: 220px;margin-left: 0px;}
  70% {height: 90px;width: 310px;border-radius: 0px 50px 50px 0px;margin-top: 220px;margin-left: 0px;}
  80% {height: 0px;width: 310px;border-radius: 0px 0px 0px 0px;margin-top: 310px;margin-left: 0px;}
  90% {height: 0px;width: 310px;border-radius: 0px 0px 0px 0px;margin-top: 310px;margin-left: 0px;}
  100% {height: 0px;width: 310px;border-radius: 0px 0px 0px 0px;margin-top: 300px;margin-left: 0px;}
}

Opgave 2 – Del 21

Vi bliver i CSS’en og laver nu klassen morfing1-sq10.

  • Gå ned i dit CSS og lav din klasse til morfing1-sq10.
.morfing1-sq10 {
  position: absolute;
  height: 200px;
  width: 100px;
  background-color: #C87BD6;
  margin-top: 110px;
  margin-left: 430px;
  animation: sq10 20s linear infinite;
}
 

Opgave 2 – Del 22

Vi bliver i CSS’en og laver nu keyframen til animationen vi kaldte på i morfing1-sq10.

  • Gå ned i dit CSS og lav din keyframe til animationen sq10.
@keyframes sq10 {
  0% {height: 190px;width: 0px;border-radius: 0px 0px 0px 0px;margin-top: 110px;margin-left: 430px;}
  50% {height: 90px;width: 0px;border-radius: 0px 0px 0px 0px;margin-top: 220px;margin-left: 530px;}
  60% {height: 90px;width: 90px;border-radius: 50px 50px 50px 50px;margin-top: 220px;margin-left: 440px;}
  70% {height: 200px;width: 90px;border-radius: 0px 50px 50px 0px;margin-top: 110px;margin-left: 440px;}
  80% {height: 200px;width: 0px;border-radius: 0px 0px 0px 0px;margin-top: 110px;margin-left: 530px;}
  90% {height: 190px;width: 0px;border-radius: 0px 0px 0px 0px;margin-top: 110px;margin-left: 430px;}
  100% {height: 190px;width: 0px;border-radius: 0px 0px 0px 0px;margin-top: 110px;margin-left: 430px;}
}

Opgave 2 – Del 23

Vi bliver i CSS’en og laver nu klassen morfing1-sq11. Som er vores sidste firkant for at skabe helheden.

  • Gå ned i dit CSS og lav din klasse til morfing1-sq11.
.morfing1-sq11 {
  position: absolute;
  height: 100px;
  width: 200px;
  background-color: purple;
  margin-top: 210px;
  margin-left: 220px;
  animation: sq11 20s linear infinite;
}
 

Opgave 2 – Del 24

Vi bliver i CSS’en og laver nu keyframen til animationen vi kaldte på i morfing1-sq11. Det allersidste stykke kode i opgaven!

  • Gå ned i dit CSS og lav din keyframe til animationen sq11.
@keyframes sq11 {
  0% {height: 0px;width: 0px;border-radius: 0px 0px 0px 0px;margin-top: 210px;margin-left: 330px;}
  10% {height: 100px;width: 0px;border-radius: 30px 30px 30px 30px;margin-top: 210px;margin-left: 430px;}
  20% {height: 100px;width: 90px;border-radius: 30px 30px 30px 30px;margin-top: 210px;margin-left: 330px;}
  28% {height: 100px;width: 0px;border-radius: 30px 30px 30px 30px;margin-top: 210px;margin-left: 340px;}
  40% {height: 100px;width: 0px;border-radius: 0px 0px 0px 0px;margin-top: 210px;margin-left: 330px;}
  50% {height: 0px;width: 0px;border-radius: 0px 0px 0px 0px;margin-top: 210px;margin-left: 330px;}
  70% {height: 0px;width: 0px;border-radius: 0px 50px 50px 0px;margin-top: 210px;margin-left: 330px;}
  80% {height: 0px;width: 200px;border-radius: 0px 0px 0px 0px;margin-top: 310px;margin-left: 330px;}
  90% {height: 90px;width: 200px;border-radius: 30px 30px 30px 30px;margin-top: 220px;margin-left: 320px;}
  100% {height: 0px;width: 310px;border-radius: 0px 0px 0px 0px;margin-top: 310px;margin-left: 220px;}
}
   
     

Her under vises/eksekveres koden