/* CSS Animacion :: Joan Peramás - http://e-solutions.com.pe */

#animacamara{ 
	height: 150px; 
	width: 900px;
	position: relative;	
}


#lente{ display:block; float:none; position:relative; z-index:0; right:-153px; top:-100px }
#cuerpo{ display:block; float:none; position:relative; z-index:0; right:0px; top:0px }
#slogan{ display:block; float:none; position:relative; z-index:0; right:-300px; top:-220px }

/* La regla general */

@keyframes lenteAnimado {
    0%       { transform: translatex(3px) translatey(1px); }
    25%      { transform: translatex(19px) translatey(8px); }
    50%      { transform: translatex(19px) translatey(8px); }
    75%      { transform: translatex(15px) translatey(6px); }	
    100%     { transform: translatex(3px) translatey(1px); }
}
@-moz-keyframes lenteAnimado {
    0%       { transform: translatex(3px) translatey(1px); }
    25%      { transform: translatex(19px) translatey(8px); }
    50%      { transform: translatex(19px) translatey(8px); }
    75%      { transform: translatex(15px) translatey(6px); }	
    100%     { transform: translatex(3px) translatey(1px); }
}	
@-o-keyframes lenteAnimado {
    0%       { transform: translatex(3px) translatey(1px); }
    25%      { transform: translatex(19px) translatey(8px); }
    50%      { transform: translatex(19px) translatey(8px); }
    75%      { transform: translatex(15px) translatey(6px); }	
    100%     { transform: translatex(3px) translatey(1px); }
}		
@keyframes lenteAnimado {
    0%       { transform: translatex(3px) translatey(1px); }
    25%      { transform: translatex(19px) translatey(8px); }
    50%      { transform: translatex(19px) translatey(8px); }
    75%      { transform: translatex(15px) translatey(6px); }	
    100%     { transform: translatex(3px) translatey(1px); }
}



//Propiedades CSS
#lente {
        animation: lenteAnimado 3s infinite;		
		animation-timing-function: ease-out;
}
/* Crhome, Safari */
#lente {
        -webkit-animation: lenteAnimado 3s infinite;	
		-webkit-animation-timing-function: ease-out;		
}