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

Microdatos html5 .

Manifiesto html5