TRABAJO SOBRE CSS3

Transiciones CSS

Las transiciones CSS le permiten cambiar los valores de las propiedades sin problemas (de un valor a otro), durante una duración determinada.

¿Cómo usar CSS Transitions?

Para crear un efecto de transición, debe especificar dos cosas: la propiedad CSS a la que desea agregar un efecto la duración del efecto
IMPORTANTE: Si no se especifica la parte de duración, la transición no tendrá efecto, porque el valor predeterminado es 0.

Ejemplos de transiciones

Codigo de transiciones

Codigo primer ejemplo

#efecto{ width: 100px; height: 100px; text-align: center; background: red; transition: width 2s; }

#efecto:hover{ width: 300px; }

Codigo segundo ejemplo

#efecto2{ width: 100px; height: 100px; text-align: center; background: red; transition: background 2s,width 2s,height 2s; }

#efecto2:hover{ width: 300px; height:300px; background: blue; }

Inicio Transiciones Animaciones Flexbox Grid