CSS | Propiedad de duración de transición

La propiedad de duración de transición en CSS se usa para especificar el tiempo (en segundos o milisegundos) para completar el efecto de transición.

Sintaxis:

transition-duration: time|initial|inherit;

Valores de propiedad:

time: se utiliza para especificar el tiempo (en segundos o milisegundos) para completar la animación de transición.

Sintaxis:

transition-duration: time;

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS transition-duration Property 
        </title> 
          
        <style> 
            div { 
                width: 100px; 
                height: 70px; 
                background: green; 
                transition-property: width;
                transition-duration: 5s;
                  
                /* For Firefox browser */
                -webkit-transition-property: width;
                -webkit-transition-duration: 5s;
                transition-delay: .2s; 
                display: inline-block; 
            } 
              
            div:hover { 
                width: 300px; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center;"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>Transition Property</h2> 
          
        <div> 
            <p>transition-duration: 5s</p> 
        </div> 
    </body> 
</html>                                   

Producción:

Antes de la transición:
Después de la transición:

initial: se utiliza para establecer la propiedad de duración de la transición en su valor predeterminado. El valor predeterminado de la duración de la transición es 0.

Sintaxis:

transition-duration: initial;

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS transition-duration Property 
        </title> 
          
        <style> 
            div { 
                width: 100px; 
                height: 80px; 
                background: green; 
                transition-property: width;
                transition-duration: initial;
                  
                /* For Firefox browser */
                -webkit-transition-property: width;
                -webkit-transition-duration: initial;
                transition-delay: .2s; 
                display: inline-block; 
            } 
              
            div:hover { 
                width: 300px; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center;"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>Transition Property</h2> 
          
        <div> 
            <p>transition-duration: initial;</p> 
        </div> 
    </body> 
</html>                                

Producción:

Antes de la transición:
Después de la transición:

heredar: el valor de la propiedad de duración de transición establecida desde su padre.

Sintaxis:

transition-duration: inherit;

Ejemplo 3:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS transition-duration Property 
        </title> 
          
        <style> 
            div { 
                width: 100px; 
                height: 270px; 
                background: green; 
                transition-property: width;
                transition-duration: inherit;
                transition-timing-function: ease-in;
                                transition-delay: .2s; 
                display: inline-block; 
            } 
              
            div:hover { 
                width: 500px; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center;"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>Transition Property</h2> 
          
        <div> 
            <p>transition-duration: inherit</p> 
        </div> 
    </body> 
</html>                    

Producción:

Antes de la transición:

Producción:

Después de la transición:

Navegadores compatibles: los navegadores compatibles con la propiedad de duración de la transición se enumeran a continuación:

Chrome 26.0, 4.0 -webkit-
Borde 10.0
Firefox 16.0, 4.0 -moz-
Ópera 12.1, 10.5 -o-
Safari 6.1, 3.1 -webkit-

Publicación traducida automáticamente

Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta