Efecto animación en las imagenes con CSS

Efecto animación en las imagenes en una entrada del blog poner en el HTML de una entrada

o en un Gadgets HTML/javaScript

el siguiente código CSS

<style type="text/css">
.classname {
-webkit-animation: cssAnimation 1s 16 ease-out;
-moz-animation: cssAnimation 1s 16 ease-out;
-o-animation: cssAnimation 1s 16 ease-out;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(-55px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(-55px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(-55px); }
}
</style>
<div class="classname">
<img src="URL DE LA IMAGEN">
</div>

Este es el resultado

Donde dice URL DE LA IMAGEN: poner la dirección correspondiente a la imagen que elegimos