Definición de .transition en CSS
La propiedad .transition es una propiedad abreviada que se utiliza para representar hasta cuatro propiedades largas relacionadas con .transition:
Caso de empleo de la propiedad transition
Esta propiedad de CSS normalmente se emplea de la siguiente manera:
.element {
transition: background-color 0.5s ease;
}Otro ejemplo más avanzado de .transition es el siguiente de CODEPEN:
Sintaxis de .transition en CSS
transition: property duration timing-function delay|initial|inherit;Valores
| Valor | Descripción |
|---|---|
| Especifica el nombre de la propiedad CSS para el efecto de transición | |
| Especifica cuántos segundos o milisegundos tarda en completarse el efecto de transición | |
| Especifica la curva de velocidad del efecto de transición. | |
| Define cuándo comenzará el efecto de transición | |
| inicial | Establece esta propiedad en su valor predeterminado. |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .transition
Los números de la tabla detallan la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transition-delay | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
