Creando Transiciones con CSS utilizando 'Transition'

Las transiciones en CSS brindan una manera de controlar la animación de los elementos HTML en el navegador. Estas son útiles para dar a los sitios web una cierta dinámica al cambiar de un estilo a otro sin usar JavaScript o jQuery. Para crear una transición en CSS, se utiliza la propiedad transition.

La respuesta correcta a la pregunta es transition: property duration;. Permiten crear un cambio gradual entre dos valores de una propiedad CSS. El efecto de transición comienza cuando se cambia el valor de una propiedad CSS.

Aquí está cómo se usa:

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
div:hover {
  width: 200px;
}

En este ejemplo, cuando el usuario pasa el cursor sobre el div, su ancho se expande gradualmente de 100px a 200px durante 2 segundos. La transición se activa por el cambio de ancho en el estado de :hover.

La propiedad transition en CSS es en realidad una shorthand para las siguientes propiedades:

• transition-property: define la propiedad a la que se le aplica el efecto de transición.
• transition-duration: establece la duración de la transición.
• transition-timing-function: determina la velocidad de la transición.
• transition-delay: establece el tiempo de espera antes de que comience la transición.

Por lo tanto, una declaración de transición más detallada seguiría este formato:

transition: [property] [duration] [timing-function] [delay];

De esta manera, las transiciones en CSS nos ayudan a mejorar la interactividad del usuario con la página web, haciendo los cambios de estilo más suaves y gradualmente cambiando, en lugar de saltar abruptamente de un estado a otro. También nos permite controlar el tiempo, el retraso, y la función de timing para dar aún más control sobre cómo se ve y se siente la animación.