CSS3 transform y transition:opacity .







Voy a dejar  el código por si quieres crear una transformación de opacidad al pasar el mouse por encima de ella que al mismo tiempo se agrande .

El html .


  <div class="photo"><img src="photos/html5.jpg"> </div></div>


el css 


.photo{
width: 970px;
padding: 05px;
border-radius:10px;
-webkit-border-radius:10px;
box-shadow:5px 05px 25px #000000;
opacity: 0.5;
transition:opacity 1s;
-webkit-transition:opacity 1s;
-o-transition:opacity 1s,transform 3s;
-moz-transition:opacity 1s,transform 3s;
transform:scale(1,1);
-webkit-transform:scale(1,1);



}

.photo:hover{
opacity: 1;
transform:scale(1.1,1.1);
-webkit-transform:scale(1.1,1.1);



}



otra animación
ejemplo en el html   colocar en id="ani" donde queremos la animación


  <footer>
            <p id="ani"><a href="https://www.behance.net/gallery/Javascript-Animacion-/15909825"><img src="ui/be.png"/></a></p>
   </footer>




y  en el css

#ani
transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;

vertical-align: top;
}
#ani:hover{

background-color: #aaa;
transform:rotate(4deg)translateX(-10px);
-webkit-transform:rotate(4deg)translateX(-10px);


}



(function($, self){

if(!$ || !self) {
return;
}

for(var i=0; i<self.properties.length; i++) {
var property = self.properties[i],
camelCased = StyleFix.camelCase(property),
PrefixCamelCased = self.prefixProperty(property, true);

$.cssProps[camelCased] = PrefixCamelCased;
}

})(window.jQuery, window.PrefixFree);


demo de la animación en el footer  


Podrías estar interesado  en



Comentarios