Opdracht

Maak een reclame banner voor een bekend chocolade merk zoals Milka, Leo, Callebaut, ...

Je maakt min. 3 @keyframes in je CSS bestand die je koppelt aan een img-element.

We gaan eerst de eigenschappen wat inoefenen download hier het startbestand.

Start eerst je ontwerp in Illustrator. Kies zelf een onderstaand webformaat (fuschia). Plaats al je eindobjecten in de juiste eind positie.

Roep eerst al je afbeeldingen op en plaats het tussen de div-groep #banner.

<body>
	<div id="banner">
		<div id="ei1"><img src="SVG/SVG/SVG/kuike1_1.svg"></div>
		<div id="ei2"><img src="SVG/SVG/SVG/kuike2_1.svg"></div>
		<div ><img src="SVG/Konijn.svg" id="konijn" width="150"></div>
		<div> <img src="SVG/Ei.svg" id="paasei" width="150"></div>
		<div id="tekst"><img src="SVG/SVG/tekst.svg"></div>
		</div>
</body>
div#banner {
  width: 300px;
  height: 600px;
  background-image:url("SVG/SVG/achtergrond goe.svg");
	background-size: cover;
	position: relative;
	overflow: hidden;
}


#ei1 {
	width: 75px;
  height: auto;
	position: absolute;
	animation:ei1 2s 1s both infinite ;
	}	
@keyframes ei1 {
	/*start links*/
	0% {left:25px; top:490px;transform: rotate(0deg)}
	25% {left:25px; top:490px;transform: rotate(20deg)}
	50% {transform: rotate(0deg)}
	75% {left:25px;top:490px;transform: rotate(-20deg)}
	100% {left:25px;top:490px;transform: rotate(0deg)}
	}

#ei2 {
	width: 75px;
  height: auto;
	position: absolute;
	animation:ei2 2s 1s both infinite ;
	}
@keyframes ei2 {
	/*start links*/
	0% {left:175px; top:490px;transform: rotate(0deg)}
	25% {left:175px; top:490px;transform: rotate(20deg)}
	50% {transform: rotate(0deg)}
	75% {left:175px;top:490px;transform: rotate(-20deg)}
	100% {left:175px;top:490px;transform: rotate(0deg)}
		}

#konijn {
	width: 150px;
  height: auto;
	position: absolute;
	animation:konijn 4s 2s both  ;
	}	
@keyframes konijn {
	/*start links*/
	0% {left:0px; top:25px;}
	25%{left: 150px}
	50% {left: 150px }
	75% {left:;top:25px;}
	100% {left:150px;top:25px;)}
}
	
#paasei {
	width: 90px;
  height: auto;
	position: absolute;
	animation:paasei 4s 2s both  ;
	}	
@keyframes paasei {
	/*start links*/
	0% {left:25px; top:155px;}
	25%{left: 175px;}
	50% {left: 175px; top: 155px;}
	75% {left:;top:510px;}
	100% {left:175px;top:510px;transform: rotate(40deg)}	
}

#tekst {
	width: 250px;
  height: auto;
	position: absolute;
	animation:tekst 2s 1s both infinite ;
	}	
@keyframes tekst {
	/*start links*/
	0% {left:25px; top:250px;transform: rotate(0deg)}
	25% {left:25px; top:250px;transform: rotate(-10deg)}
	50% {transform: rotate(0deg)}
	75% {left:25px;top:250px;transform: rotate(10deg)}
	100% {left:25px;top:250px;transform: rotate(0deg)}
}