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