La propiedad animationFillMode del estilo DOM se usa para especificar el estilo de un elemento cuando la animación no se está reproduciendo, cuando finaliza o cuando hay un retraso en la animación. La propiedad animationFillMode puede anular el comportamiento predeterminado de las animaciones CSS por el cual las animaciones CSS afectan al elemento cuando se «reproduce» el primer fotograma clave y luego dejan de afectarlo una vez que se completa el último fotograma clave.
Sintaxis:
- Para devolver la propiedad animationFillMode, use lo siguiente:
object.style.animationFillMode;
- Para establecer el uso de la propiedad animationFillMode a continuación:
object.style.animationFillMode = "none|forwards|backwards|both| initial|inherit";
Valores devueltos: Devuelve una string que representa la propiedad animation-fill-mode de un elemento
Valores de propiedad:
- ninguno: no aplicará ningún estilo al destino antes o después de que se ejecute.
- forwards: Aplicará los valores de propiedad para el tiempo que finalizó la animación.
- Hacia atrás: Aplicará los valores de propiedad definidos en el fotograma clave que iniciará la primera iteración de la animación, durante el período definido por animation-delay.
- ambos: Aplicará los valores de propiedad tanto hacia adelante como hacia atrás en la animación.
- initial: establecerá la propiedad en su valor predeterminado.
- heredar: esta propiedad se hereda de su padre.
Enfoque: el elemento <div> obtiene los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación durante el período de retraso de la animación.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50px;
height: 50px;
background: green;
position: relative;
-webkit-animation: animate 2s 1;
/* Chrome, Safari, Opera */
animation: animate 2s 2;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animate {
from {
left: 500px;
}
to {
left: 0px;
}
}
@keyframes animate {
from {
left: 500px;
}
to {
left: 0px;
}
}
</style>
</head>
<body>
<p>Click the "Try it" button to let the
DIV element keep the styles set by the
last keyframe: to {left:0px;}, when
the animation is finished.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
// Code for Chrome, Safari, and Opera
document.getElementById(
"div1").style.WebkitAnimationFillMode =
"backwards";
document.getElementById(
"div1").style.animationFillMode =
"backwards";
}
</script>
<div id="div1"></div>
</body>
</html>
Producción:
Ejemplo-2:
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50px;
height: 50px;
background: green;
position: relative;
-webkit-animation: animate 2s 1;
/* Chrome, Safari, Opera */
animation: animate 2s 2;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animate {
from {
left: 0px;
}
to {
left: 500px;
}
}
@keyframes animate {
from {
left: 0px;
}
to {
left: 500px;
}
}
</style>
</head>
<body>
<p>Click the "Try it" button to let the
DIV element keep the styles set by the
last keyframe: to {left:500px;}, when
the animation is finished.
</p>
<button onclick="myFunction()">
Try it
</button>
<script>
function myFunction() {
// Code for Chrome, Safari, and Opera
document.getElementById(
"div1").style.WebkitAnimationFillMode =
"forwards";
document.getElementById(
"div1").style.animationFillMode =
"forwards";
}
</script>
<div id="div1"></div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad animationFillMode se enumeran a continuación:
- Google Chrome 43.0 y superior
- Borde 12.0 y superior
- Firefox 16.0 y superior
- Ópera 30.0 y superior
- Safari 9.0 y superior
- Internet Explorer 10.0 y superior
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA