Ejemplo
Deje que el efecto de transición pasada por 5 segundos:
div {
-webkit-transition-duration: 5s; /* Safari */
transition-duration: 5s;
}
Inténtalo tú mismo " Definición y Uso
La propiedad de transición de duración especifica cuántos segundos (s) o en milisegundos (ms) un efecto de transición tarda en completarse.
| Valor por defecto: | 0s |
|---|---|
| Heredado: | no |
| animatable: | no. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.transitionDuration="1s" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit-, -moz- o -O- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| transition-duration | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
sintaxis CSS
transition-duration:time|initial|inherit;Valores de propiedad
| Valor | Descripción |
|---|---|
| time | Especifica el número de segundos o milisegundos un efecto de transición tarda en completarse. El valor por defecto es 0 s, es decir, habrá ningún efecto |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Páginas relacionadas
CSS tutorial: CSS3 Transitions
Referencia HTML DOM: transitionDuration property