CSS3: «transition» hace que la imagen se mueva 1px

Si usáis la propiedad «transition» de css3 para crear animaciones, y observáis que al hacer «hover» sobre un elemento, el efecto hace que a su vez se mueva 1px… para solucionarlo podemos añadir la función «translateZ» de transform con valor 0.

Un ejemplo aplicando opacidad a una imagen usando pseudo-clase «:hover»:

img{
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    transition: all .25s linear;

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}
img:hover{
    opacity: .5;
}