Efecto de movimiento sencillo con CSS3: La propiedad transition

Con la adopción de la mayoría de navegadores de los atributos propios de CSS3 se abren puertas para hacer más rápido los efectos :hover. Si hasta no hace mucho lo normal era utilizar sprites para simular cambios de color o movimiento ahora es más rápido (y más ligero) hacerlo mediante transition.

Si quiero que un efecto :hover haga una transición suave marco primero las propiedades que van a cambiar al pasar el ratón por encima (con margin, padding, etc.) o cambio de color (con background-color, por ejemplo) o por qué no, ambas.

a:hover {margin-top:3px; background-color:red;}

Luego añado la propiedad transition para todos los navegadores disponibles:

a:hover {
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
  • Donde all marca todo el elemento pero podría cambiar modificando sólo el ancho (width), el alto (height), el color (color), etc.
  • 300ms es la duración en milisegundos, podríamos utilizar 1s para un segundo, 2s, etc.
  • ease-in-out es el efecto easing y podría sustituirse ease-in o cualquier otro elemento de esta propiedad.

Podéis pegarle un vistazo a todas los efectos disponibles con una demo y su explicación en easings.net y obtener un listado de todas sus propiedades y compatibilidad en el enlace de la w3schools.

Easings.net Transitions en CSS3