Las transiciones en CSS nos permiten aplicar un cambio de estilo gradual a los elementos del documento HTML. Además, nos ofrecen la ventaja de poder especificar el tiempo para que se produzca la transformación entre estilos, de esta forma podríamos utilizarlas para dar un efecto de animación.
1. Transiciones en CSS: Sintaxis
Todos los parámetros para aplicar las transiciones se pueden establecer en una sola línea y también mediante propiedades por separado. Veamos cómo se implementa en una sola línea mediante la propiedad abreviada transition.
Formato:
transition:[propiedad a modificar] [Duración] [Tipo de animación] [Retardo];
Significado de las propiedades:
[Propiedades a modificar]: algunas de las propiedades que podemos modificar utilizando transiciones son las que se muestran en la siguiente lista:
background-color border border-radius color top bottom left right box-shadow width height line-height margin opacity word-spacing letter-spacing fill padding stroke text-shadow vertical-align visibility z-index
[Duración en segundos]: se debe especificar el número de segundos que va a durar la animación. Por ejemplo: 3s (3 segundos).
[Tipo de animación]: esta propiedad es opcional y sirve para indicar la velocidad de la animación. Algunas de las posibilidades son las siguientes:
- linear: la velocidad de la animación es uniforme en todo el recorrido.
- ease: la velocidad se acelera al inicio, luego se retarda un poco y se acelera al final de nuevo.
- ease-in: la animación empieza lentamente y va aumentando progresivamente.
- ease-out: la animación empieza muy rápida y va descendiendo progresivamente.
- ease-in-out: la animación empieza y acaba lentamente, y es en la parte central del recorrido donde la velocidad es más rápida.
[Retardo]: tiempo (en segundos) que el navegador esperará antes de poner en marcha la animación. Se especifica el número de segundos a esperar seguido de la «s» (ejemplo: 1s).
Ejemplo:
.caja1{
background-color: #C0392B;
transition: background-color 1s linear;
}
.caja1:hover{
background-color: #3F51B5;
}
Además de la propiedad reducida transition, también podemos utilizar las propiedades específicas que permiten ajustar más detalles de las transiciones, como transition-duration, transition-delay, transition-timing-function y transition-property, que se pueden declarar individualmente para definir cada aspecto de la animación.
2. Ejemplos de transiciones CSS
Ejemplo
Crea un contenedor de 180 píxeles de ancho y de alto, incluye un texto en su interior y aplícale un color de fondo. Realiza las siguientes transiciones cuando el usuario pase por encima del contenedor el puntero del ratón:
- Cambia el color de fondo del contenedor.
- Cambia el tamaño de las letras del contenedor.
- Cambia el color de las letras del contenedor.
- Cambia el valor del interlineado.
- Cambia el valor de la propiedad border-radius del contenedor.
- Cambia el valor de la sombra del contenedor.
- Cambia la opacidad del contenedor.
- Cambia tres propiedades más a tu elección.
Ejemplo
Menú con transiciones:
3. Cambios de estado
Las transiciones se ejecutan cuando un elemento cambia de estado y alguna de sus propiedades animables varía. No solo ocurren al pasar el ratón (:hover), sino también con otros estados como :focus (cuando recibe el foco), :active (mientras se presiona), :checked (cuando está marcado), :disabled o :enabled (según esté inactivo o activo).
También pueden activarse al añadir o quitar clases con JavaScript, por ejemplo al aplicar o eliminar .activo.
Comprueba tu apendizaje