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 utilizar1s
para un segundo,2s
, etc.ease-in-out
es el efecto easing y podría sustituirseease-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