donderdag 27 december 2012

Animation with just HTML5 and CSS3 code

WEBPAGE:

http://www.guyvanovertveldt.net/nieuwjaar.html

 HTML5:

 

<!DOCTYPE HTML>  
 <html>  
     <head>  
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
         <title>Nieuwjaar</title>  
         <link href="./style/nieuwjaar.css" type="text/css" rel="stylesheet">  
     </head>  
     <body id="main">  
         <header id="header">   
         <h1>2013 2013 2013 2013 2013 2013 2013 2013 2013 2013 2013 </h1>  
     </header>  
           <div id="pic1"> <img id="p1" width="170" height="170" alt="" src="images/champagne2.jpg"> </div>  
         <div id="nederlands">Een gelukkig nieuwjaar!</div>  
     <div id="frans">Bonne année!</div>  
     <div id="engels">Happy new year!</div>  
     <div id="pic2"> <img alt="" src="images/champagne.jpg"> </div>  
         <div id="foot">  
           Written by me in HTML5/CSS3 the future of web desgin  
           </div>  
       <footer id="footer" ></footer>  
     </body>  
 </html>

CSS3:

 
@charset "UTF-8";  
 /* CSS Document */  
   
 #main{  
     background:#003;  
     -webkit-transform-style: preserve-3d;  
     -webkit-perspective: 1200px;  
     -moz-transform-style: preserve-3d;  
     -moz-perspective: 1200px;  
   
 }  
   
 #pic1{  
     margin-left:600px;  
     width:200px;  
 }  
   
 #pic1 img{  
     -webkit-transition:opacity 1s ease-in-out;  
 }  
   
 #pic1 img:hover{  
     opacity:0.1;  
 }  
   
 #pic2 img{  
     -webkit-transition:opacity 1s ease-in-out;  
 }  
   
 #pic2 img:hover{  
     opacity:0.1;  
 }  
   
 #pic2{  
     margin-left:100px;  
     width:250px;  
 }  
   
 #foot{  
     text-align:center;  
     color:#CF3;  
     font-size:10px;  
     margin-top:20px;  
     font-family:"Arial Black", Gadget, sans-serif;  
     -webkit-animation:foot 10s infinite;  
 }  
   
 #header{  
     text-align:center;  
     color:#FF6;  
     font-size:20px;  
     width:auto;  
     -webkit-animation:head 10s infinite;  
 }  
   
 #footer{  
     width:auto;  
     height:50px;  
 }  
   
 #nederlands{  
     color:#C33;  
     width:200px;  
     font-size:44px;  
     animation:anim1 15s infinite;  
     -webkit-animation:anim1 15s infinite;  
     -moz-animation:anim1 15s infinite;  
     -o-animation:anim1 15s infinite;  
       
 }  
   
 #frans {  
     color:#3F9;  
     width:200px;  
     font-size:44px;  
     animation:anim2 15s infinite;  
     -webkit-animation:anim2 15s infinite;  
     -moz-animation:anim2 15s infinite;  
     -o-animation:anim2 15s infinite;  
       
 }  
   
 #engels{  
     color:#03F;  
     width:200px;  
     font-size:44px;  
     animation:anim3 15s infinite;  
     -webkit-animation:anim3 15s infinite;  
     -moz-animation:anim3 15s infinite;  
     -o-animation:anim3 15s infinite;  
       
 }  
   
 @keyframes pict1{  
     0% {opacity:0.2;}  
     100% {opacity:0.9;}  
 }  
   
 @keyframes head{  
     0% {color:#900;opacity:0.4}  
     100% {color:#CF3;opacity:0.9}  
 }  
   
 @keyframes foot{  
     0% {color:#900}  
     100% {color:#CF3}  
 }  
   
 /*anim1*/  
 @keyframes anim1{  
     0% {transform:scale(1,1) translate(0px,0px) rotateZ(0deg);}  
     15% {transform:scale(1.5,1.5) translate(500px,10px) rotateZ(-360deg);}  
     25% {transform:scale(1.5,1.5) translate(500px,10px) rotateZ(360deg);}  
     50% {transform:scale(0.5,0.5) translate(200px,300px) rotateZ(-180deg);}  
     75% {transform:scale(1.5,1.5) translate(300px,100px) rotateZ(+330deg);}  
     85% {transform:scale(1.5,1.5) translate(300px,100px) rotateZ(-330deg);}  
     100% {transform:scale(3.0,3.0) translate(150px,150px) rotateZ(0deg);}  
   
 }  
   
 @-webkit-keyframes anim1{  
     0% {-webkit-transform:scale(1,1) translate(0xp,0px) rotateZ(0deg);}  
     15% {-webkit-transform:scale(1.5,1.5) translate(500px,10px) rotateZ(-360deg);}  
     25% {-webkit-transform:scale(1.5,1.5) translate(500px,10px) rotateZ(360deg);}  
     50% {-webkit-transform:scale(0.5,0.5) translate(200px,300px) rotateZ(-180deg);}  
     75% {-webkit-transform:scale(1.5,1.5) translate(300px,100px) rotateZ(+330deg);}  
     85% {-webkit-transform:scale(0.5,0.5) translate(300px,100px) rotateZ(-330deg);}  
     100% {-webkit-transform:scale(3.0,3.0) translate(150px,50px) rotateZ(0deg);}  
 }  
   
 @-moz-keyframes anim1{  
     0% {-moz-transform:scale(1,1) translate(0xp,0px) rotateZ(0deg);}  
     15% {-moz-transform:scale(1.5,1.5) translate(500px,10px) rotateZ(-360deg);}  
     25% {-moz-transform:scale(1.5,1.5) translate(500px,10px) rotateZ(360deg);}  
     50% {-moz-transform:scale(0.5,0.5) translate(200px,300px) rotateZ(-180deg);}  
     75% {-moz-transform:scale(1.5,1.5) translate(300px,100px) rotateZ(+330deg);}  
     85% {-moz-transform:scale(0.5,0.5) translate(300px,100px) rotateZ(-330deg);}  
     100% {-moz-transform:scale(3.0,3.0) translate(150px,150px) rotateZ(0deg);}  
   
 }  
   
 @-o-keyframes anim1{  
     0% {-o-transform:scale(1,1) translate(0px,0px) rotateZ(0deg);}  
     15% {-o-transform:scale(1.5,1.5) translate(500px,10px) rotateZ(-360deg);}  
     25% {-o-transform:scale(1.5,1.5) translate(500px,10px) rotateZ(360deg);}  
     50% {-o-transform:scale(0.5,0.5) translate(200px,300px) rotateZ(-180deg);}  
     75% {-o-transform:scale(1.5,1.5) translate(300px,100px) rotateZ(+330deg);}  
     85% {-o-transform:scale(0.5,0.5) translate(300px,100px) rotateZ(-330deg);}  
     100% {-o-transform:scale(3.0,3.0) translate(150px,150px) rotateZ(0deg);}  
   
 }  
   
 /*anim2*/  
   
 @keyframes anim2{  
     0% {transform:scale(1,1) translate(0px,0px) rotateY(0deg);}  
     15% {transform:scale(1.5,1.5) translate(500px,10px) rotateY(-60deg);}  
     25% {transform:scale(1.5,1.5) translate(500px,10px) rotateY(-60deg);}  
     50% {transform:scale(0.5,0.5) translate(200px,300px) rotateY(-180deg);}  
     75% {transform:scale(1.5,1.5) translate(300px,100px) rotateY(+330deg);}  
     85% {transform:scale(0.5,0.5) translate(300px,100px) rotateY(+330deg);}  
     100% {transform:scale(3.0,3.0) translate(150px,150px) rotateY(0deg);}  
 }  
   
 @-webkit-keyframes anim2{  
     0% {-webkit-transform:scale(1,1) translate(0px,0px) rotateY(0deg);}  
     15% {-webkit-transform:scale(1.5,1.5) translate(500px,10px) rotateY(-60deg);}  
     25% {-webkit-transform:scale(1.5,1.5) translate(500px,10px) rotateY(-60deg);}  
     50% {-webkit-transform:scale(0.5,0.5) translate(200px,300px) rotateY(-180deg);}  
     75% {-webkit-transform:scale(1.5,1.5) translate(300px,100px) rotateY(+330deg);}  
     85% {-webkit-transform:scale(0.5,0.5) translate(300px,100px) rotateY(+330deg);}  
     100% {-webkit-transform:scale(3.0,3.0) translate(150px,50px) rotateY(0deg);}  
 }  
   
 @-moz-keyframes anim2{  
     0% {-moz-transform:scale(1,1) translate(0px,0px) rotateZ(0deg);}  
     15% {-moz-transform:scale(1.5,1.5) translate(500px,10px) rotateZ(-60deg);}  
     25% {-moz-transform:scale(1.5,1.5) translate(500px,10px) rotateZ(-60deg);}  
     50% {-moz-transform:scale(0.5,0.5) translate(200px,300px) rotateZ(-180deg);}  
     75% {-moz-transform:scale(1.5,1.5) translate(300px,100px) rotateZ(+330deg);}  
     85% {-moz-transform:scale(0.5,0.5) translate(300px,100px) rotateZ(+330deg);}  
     100% {-moz-transform:scale(3.0,3.0) translate(150px,150px) rotateZ(0deg);}  
 }  
   
 @-o-keyframes anim2{  
     0% {-o-transform:scale(1,1) translate(0px,0px) rotateY(0deg);}  
     15% {-o-transform:scale(1.5,1.5) translate(500px,10px) rotateY(-60deg);}  
     25% {-o-transform:scale(1.5,1.5) translate(500px,10px) rotateY(-60deg);}  
     50% {-o-transform:scale(0.5,0.5) translate(200px,300px) rotateY(-180deg);}  
     75% {-o-transform:scale(1.5,1.5) translate(300px,100px) rotateY(+330deg);}  
     85% {-o-transform:scale(0.5,0.5) translate(300px,100px) rotateY(+330deg);}  
     100% {-o-transform:scale(3.0,3.0) translate(150px,150px) rotateY(0deg);}  
 }  
   
 /*anim3*/  
   
 @keyframes anim3{  
     0% {transform:scale(1,1) translate(0px,0px) rotateX(0deg);}  
     15% {transform:scale(1.5,1.5) translate(500px,10px) rotateX(-60deg);}  
     25% {transform:scale(1.5,1.5) translate(500px,10px) rotateX(-60deg);}  
     50% {transform:scale(0.5,0.5) translate(200px,300px) rotateX(-180deg);}  
     75% {transform:scale(1.5,1.5) translate(300px,100px) rotateX(+330deg);}  
     85% {transform:scale(1.5,1.5) translate(300px,100px) rotateX(+330deg);}  
     100% {transform:scale(3.5,3.5) translate(150px,150px) rotateX(0deg);}  
 }  
   
 @-webkit-keyframes anim3{  
     0% {-webkit-transform:scale(1,1) translate(0px,0px) rotateX(0deg);}  
     15% {-webkit-transform:scale(1.5,1.5) translate(500px,10px) rotateX(-60deg);}  
     25% {-webkit-transform:scale(1.5,1.5) translate(500px,10px) rotateX(-60deg);}  
     50% {-webkit-transform:scale(0.5,0.5) translate(200px,300px) rotateX(-180deg);}  
     75% {-webkit-transform:scale(1.5,1.5) translate(300px,100px) rotateX(+330deg);}  
     85% {-webkit-transform:scale(1.5,1.5) translate(300px,100px) rotateX(+330deg);}  
     100% {-webkit-transform:scale(3.5,3.5) translate(150px,50px) rotateX(0deg);}  
   
 }  
   
 @-moz-keyframes anim3{  
     0% {-moz-transform:scale(1,1) translate(0px,0px) rotateZ(0deg);}  
     15% {-moz-transform:scale(1.5,1.5) translate(500px,10px) rotateZ(-60deg);}  
     25% {-moz-transform:scale(1.5,1.5) translate(500px,10px) rotateZ(-60deg);}  
     50% {-moz-transform:scale(0.5,0.5) translate(200px,300px) rotateZ(-180deg);}  
     75% {-moz-transform:scale(1.5,1.5) translate(300px,100px) rotateZ(+330deg);}  
     85% {-moz-transform:scale(1.5,1.5) translate(300px,100px) rotateZ(+330deg);}  
     100% {-moz-transform:scale(3.5,3.5) translate(150px,150px) rotateZ(0deg);}  
 }  
   
 @-o-keyframes anim3{  
     0% {-o-transform:scale(1,1) translate(0px,0px) rotateX(0deg);}  
     15% {-o-transform:scale(1.5,1.5) translate(500px,10px) rotateX(-60deg);}  
     25% {-o-transform:scale(1.5,1.5) translate(500px,10px) rotateX(-60deg);}  
     50% {-o-transform:scale(0.5,0.5) translate(200px,300px) rotateX(-180deg);}  
     75% {-o-transform:scale(1.5,1.5) translate(300px,100px) rotateX(+330deg);}  
     85% {-o-transform:scale(1.5,1.5) translate(300px,100px) rotateX(+330deg);}  
     100% {-o-transform:scale(3.5,3.5) translate(150px,150px) rotateX(0deg);}  
 }
Gepost door op Geen opmerkingen:
Abonneren op: Reacties (Atom)