/*creo il primo stage*/

#stage1{
	float:left;
	width: 450px;
	height: 576px;
	background-color: #fff;
	border: 1px solid #000;
	padding: 5px; /*Il padding ¸ lo spazio, in termini di pixel, che cÕ¸ allÕinterno di un riquadro.*/

}

/*creo la mia figura di esempio e i parametri dell'animazione*/
#esempio
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst; /*nome della mia animazione*/
animation-duration:20s; /*durata della transizione*/
animation-timing-function:linear; /*imposto una velocita' costante*/
animation-delay:2s; 
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;} /*imposto il colore di partenza e le coordinate di partenza */
25%  {background:yellow; left:350px; top:0px;} /* imposto il secondo colore e le coordinate della variazione del path */
50%  {background:blue; left:500px; top:200px;} /* ecc.... */
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;} /* ritorno al punto di partenza */
}
@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:350px; top:0px;}
50%  {background:blue; left:350px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:350px; top:0px;}
50%  {background:blue; left:350px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
} 
/* altro metodo per definire la variazione del colore
@keyframes  nome_animazione { 
from (color: red; )
35% (color: green; )
to (color: blue ) */
				
/*@-moz-keyframes nomeanimazione  Firefox 
{
from ( color: red; )
35% ( color: green; )
to ( color: blue ) 
}*/ 

/*@-webkit-keyframes nomeanimazione Safari e Chrome 
{
from ( color: red; )
35% ( color: green; )
to ( color: blue ) 
}*/