Voorbeeld animatie

dabblet.css

/**
 * Voorbeeld animatie
 */
 
@-webkit-keyframes footeranimatie { /* declaratie van de animatie van de footer */
	0% { left: 5px;}
	25% { top: 50px; }
	50% { left: 300px;}
	75% { top: -50px; }
	100% { left: 5px;} 
}


body {background-color:#333; }


div#container {
	height:900px;
	width:1000px;
	margin-right:200px;	
 	margin-left:200px;
	background-color:#999;
	float:left;
}


div#logolimited img{
	width:250px;
	height:250px;
	margin-right: 5px;
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	float:left;
}


div#Tekstgroot {
	border-bottom-width:thin;
	width:735px;
	height:250px;
	margin-left: 5px;
	margin-bottom: 5px;
	float:right;
}


div#HomeOvermij {
	color:#FFF;
	background-color:#333;
	width:250px;
	height:65px;
	margin-left: 5px;
	margin-bottom: 5px;
	float:left;
	clear:left;
}


div.menu-item {float:left;
width:125px; }


div#Portfolio {
	color:#FFF;
	background-color:#000;
	width:250px;
	height:65px;
	margin-left: 0px;
	margin-bottom: 0px;
	float:left;
}


div#uitlegopdracht{
	width:735px;
	height:65px;
	margin-left: 5px;
	margin-bottom: 5px;
	float:left;
}


div#Uitlegmuziek {
	height:225px;
	width:500px;
	margin-left: 5px;
	margin-bottom: 5px;
	float:left;
}


div#foto {
	height:200px;
	width:250px;
	margin-left: 5px;
	float:right;
	margin-bottom: 5px;
}


div#foto img {
	width:350px;
	height:300px;
	position:fixed;
	bottom:115px;
	right:214px;
}


div#footer {
	width:250px; /* iets smaller gemaakt */
	height:25px;
	margin-left: 5px;
	margin-bottom: 5px;
	float:left;
	
	clear:both; /* geen last van de andere div's */
	position:relative; /* position relatief t.o.v. parent */
	left: 5px; /* begin waarde */
	-webkit-animation-name: footeranimatie;  /* referentie naar animatie */
    	-webkit-animation-iteration-count: infinite;  /* oneindig vaak herhalen */
    	-webkit-animation-timing-function: ease-in-out; /* langzaam beginnen en eindigen */
    	-webkit-animation-duration: 10s; /* tijdsduur van de animatie */
}
#container #HomeOvermij .menu-item {
	font-size: 24px;
}


#Portfolio {
	font-size: 50px;
}


body, td, th {
	font-family: Arial, Helvetica, sans-serif;
}

dabblet.html

<!-- beweging footer -->
<div id="container">
 		<div id="logolimited"></div>
  			<div id="TekstGroot"> <p>Welkom op mijn site!</p> <p> Op deze site vind je informatie over mezelf en mijn intresses!</p></div>
  				<div id="HomeOvermij">
    			<div class="menu-item">Home</div>
    			<div class="menu-item">Over Mij</div>
    			<div id="Portfolio"> Portfolio! </div>
  			</div>
  <div id="uitlegopdracht"> UITLEG OPDRACHT<p> Voor het Project Multi Media van school moesten wij een site maken die over jezelf gaat! op deze site staat daarom ook een animatie met daarin afbeeldingen die bij mijn intresses liggen of die iets met mij te maken hebben. Ook heb ik mijn portfolio erop gezet om te laten zien wat ik nog meer op school, maar ook buiten school om, heb gemaakt! </p></div>
  	<div id="foto"></div>
  <div id="Uitlegmuziek"><p> '</p><p> Ik luister zelf vooral hip-hop, maar kan prima genieten van hele andere muziek! Vandaar dat ik in mijn animatie ook rappers heb verwerkt.</p> </div>
  <div id="footer">© V. Naam copyright</div>
</div>

settings.json

{"view":"split","prefixfree":"","page":"html"}