Transiciones en CSS3

Transiciones en CSS3

Las transiciones en CSS3 proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.

Subpropiedades de las transiciones

Podemos controlar los componentes individuales de la transición usando las siguientes subpropiedades:

transition-property

Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instantánea como siempre.

transition-duration

Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.

transition-timing-function

Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.

transition-delay

Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.

Ejemplo:

body{
background: #800B0D;
}
.marco{
width: 800px;
margin: 20px auto;
background:#8F8E8E;
padding: 30px;
}
.circulo{
height: 200px;
width: 200px;
background:#565B05;

}
.circulo:hover{
height: 300px;
background: blue;
transition-property: height,background;
transition-duration: 3s;
}