La transition-durationpropiedad, que normalmente se usa como parte de la transitiontaquigrafía, se usa para definir la duración de una transición específica. Es decir, el tiempo que tardará el elemento objetivo en realizar la transición entre dos estados definidos.
.example ( transition-duration: 3s; )El valor puede ser uno de los siguientes:
- Un valor de tiempo válido (definido en segundos o milisegundos)
- Una lista de valores de tiempo separados por comas, para la transición de varias propiedades en un solo elemento
El valor predeterminado para transition-durationes 0s, lo que significa que no se llevará a cabo ninguna transición y el cambio de propiedad se llevará a cabo de inmediato, incluso si se definen las otras propiedades relacionadas con la transición. El valor de tiempo se puede expresar como un número decimal para una sincronización más precisa y no se permiten valores negativos.
El siguiente CodePen muestra un efecto de desplazamiento sobre un cuadro que usa un transition-durationvalor de 1spara cambiar gradualmente el color de fondo:
Para la compatibilidad en todos los navegadores compatibles, se requieren prefijos de proveedor, con la sintaxis estándar declarada en último lugar:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (la primera versión estable de IE compatible transition-duration) no requiere el -ms-prefijo.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Trabajos | Trabajos | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |