De las dos reglas de estilo que hablamos son las que se activan mediante la pseudoclase :hover. Veamos cómo sería la sintaxis para lograr este efecto.
Supongamos que queremos cambiar el color de fondo de una etiqueta article cuando el usuario pasa el mouse sobre ella:
article { backgroundcolor:
red; }
article:hover { backgroundcolor:
blue; }
Al pasar sobre esta etiqueta, el color de fondo cambiará de forma brusca de rojo a azul. Ahora bien, si queremos crear una transición más estética y elegante entre estas reglas de estilo, debemos usar la propiedad transition en la primera regla de estilo. De la siguiente forma:
article { backgroundcolor:
red;
transition:
all 2s;
}
article:hover { backgroundcolor:
blue; }
De esta manera, el color de fondo del elemento cambiará con una transición elegante y gradual que durará dos segundos.
Opciones
La propiedad transition es la forma abreviada de una serie de opciones que explicamos a continuación:
– transitionproperty: determina la propiedad a la cual se aplicará la transición.
– transitionduration: establece el tiempo en el cual se realizará la transición.
– transitiondelay: indica el tiempo de espera que tendrá la transición antes de ejecutarse.
– transitiontimingfunction: determina el tipo de animación que usará la transición al ejecutarse.
Veamos un ejemplo usando todas las propiedades:
article{
transitionproperty:
width;
transitionduration:
2s;
transitiontimingfunction:
linear;
transitiondelay:
1s;
}
Podemos resumir este código usando la propiedad transition para agrupar todas las características de la propiedad. En este caso sería:
Div {
transition: width 2s linear 1s;
}
De esta forma obtendremos el mismo efecto usando muchas menos líneas de código.
Tipos
Como mencionamos antes, la propiedad transition posee distintos efectos de animación que se aplican mediante la propiedad transitiontimingfunction. Veamos a continuación qué hace cada uno de ellos.
-ease: la transición comienza lenta, luego se hace más rápida y se vuelve lenta otra vez.
-linear: la transición es siempre igual, de principio a fin.
-easein: la transición es más lenta al comienzo.
-easeout: la transición es más lenta al final.
-easeinout: el efecto de la transición es lento al comienzo y al final.
-cubicbezier(n,n,n,n): con esta opción podemos definir una transición personalizada para cada caso.
