Transiciones en CSS, estilos diferentes entre estados

Transiciones en CSS

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:

• 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

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.

0

Menú con transiciones:

0

Comprueba tu aprendizaje

Ejercicios propuestos

Actividad 7.

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.