La propiedad Style animationDuration en HTML DOM se usa para establecer el intervalo de tiempo para completar un ciclo de una animación.
Sintaxis:
- Devuelve la propiedad animationDuration.
object.style.animationDuration
- Establece la propiedad animationDuration.
object.style.animationDuration = "time|initial|inherit"
Valores devueltos: devuelve una string que representa la propiedad de duración de la animación de un elemento
Valores de propiedad:
- tiempo: se utiliza para especificar el tiempo durante el cual una animación completará un ciclo. El valor predeterminado es 0, es decir, no se mostrará ninguna animación.
- initial: se utiliza para establecer la propiedad animationDuration del estilo en su valor predeterminado.
- heredar: hereda la propiedad animationDuration del estilo de su padre.
Prefijos de proveedores: para la compatibilidad del navegador, muchos desarrolladores web agregan propiedades específicas del navegador mediante el uso de extensiones como -webkit- para Safari, Google Chrome y Opera, -ms- para Internet Explorer, -moz- para Firefox, -o- para versiones anteriores de Opera, etc. Si el navegador no admite ninguna extensión, simplemente la ignorará.
Ejemplo 1:
<!DOCTYPE html> <html> <head> <title> HTML DOM Style animationDuration Property </title> <style> div { width: 100px; height: 100px; background:#32CD32; position: relative; /*For Chrome, Safari, Opera browsers */ /* animation name geeks */ /* infinite animation iteration */ -webkit-animation: geeks 5s infinite; animation: geeks 5s infinite; } /* Used for Chrome, Safari, Opera */ @-webkit-keyframes geeks { from { left: 0px; top:20px; } to { left: 300px; top:20px; } } @keyframes geeks { from { left: 0px; top:20px; } to { left: 300px; top:20px; } } </style> </head> <body> <button onclick = "myGeeks()"> Click the button to speed up the duration of animation </button> <script> function myGeeks() { /* For Chrome, Safari, and Opera browsers */ document.getElementById("GFG").style.WebkitAnimationDuration = "1s"; document.getElementById("GFG").style.animationDuration = "1s"; } </script> <div id = "GFG"> GeeksforGeeks </div> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2:
<!DOCTYPE html> <html> <head> <title> HTML DOM Style animationDuration Property </title> <style> div { width: 100px; height: 100px; background:#32CD32; position: relative; /* For Chrome, Safari, Opera */ /* infinite animation iteration */ -webkit-animation: mymove 5s infinite; animation: mymove 5s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { from { left: 0px; background-color: white; } to { left: 200px; background-color: #32CD32; } } @keyframes myanim { from { left: 0px; background-color: white; } to { left: 200px; background-color: #32CD32; } } </style> </head> <body> <button onclick = "myGeeks()"> Click the button to speed up the duration of animation </button> <script> function myGeeks() { document.getElementById("GFG").style.WebkitAnimationDuration = "1s"; document.getElementById("GFG").style.animationDuration = "1s"; } </script> <div id = "GFG"> The animation-duration Property </div> </body> </html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con Style animationDuration Property se enumeran a continuación:
- Firefox 16.0, 5.0 -moz-
- Ópera 30.0
- Google Chrome 43.0
- Safari 9.0