Tabla de contenidos
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.
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.
Formato:
transition:[propiedad a modificar] [Duración] [Tipo de animación] [Retardo];
Ejemplo:
.caja1{ background-color: #C0392B; transition: background-color 1s linear; } .caja1:hover{ background-color: #3F51B5; }
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:
all 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:
[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).
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:
0
Menú con transiciones:
0
Utiliza transiciones para algunos de los botones de tu proyecto web o para otro elemento en el que te parezca adecuado el uso de transiciones.