La propiedad animation-fill-mode se utiliza para especificar los valores que aplica la animación antes y después de ejecutarse. Antes de reproducir el primer fotograma clave o después de reproducir el último fotograma clave, las animaciones CSS no afectan al elemento. La propiedad animation-fill-mode puede anular este comportamiento.
Sintaxis:
animation-fill-mode: none | forwards | backwards | both | initial | inherit;
Valor de propiedad: la propiedad animation-fill-mode contiene muchos valores que se enumeran a continuación:
- none: Es el valor por defecto. Las propiedades de la animación no se aplicarán a ningún elemento antes o después de su ejecución.
- adelante: el elemento conservará las mismas propiedades de animación del último fotograma clave después de que se complete la animación.
- Hacia atrás: este valor de propiedad se utiliza para establecer el elemento en el primer valor de fotograma clave antes de iniciar la animación.
- ambos: esta propiedad se utiliza para seguir las reglas tanto para adelante como para atrás.
- initial: esta propiedad se utiliza para establecer la propiedad en su valor predeterminado.
- heredar: esta propiedad se utiliza para heredar esta propiedad de su elemento principal.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | animation-fill-mode Property
</title>
<style>
h1 {
color:green;
}
h1, p {
text-align:center;
}
h2 {
width: 400px;
background-color: orange;
animation-name: text;
animation-duration: 3s;
}
#one {
animation-fill-mode: none;
}
#two {
animation-fill-mode: forwards;
}
#three {
animation-fill-mode: backwards;
animation-delay: 2s;
}
#four {
animation-fill-mode: both;
animation-delay: 2s;
}
@keyframes text {
from {
margin-left: 0%;
background-color: #aaaaaa;
}
to {
margin-left: 60%;
background-color: #008000;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
<h2 id="one">none</h2>
<h2 id="two">forwards</h2>
<h2 id="three">backwards</h2>
<h2 id="four">both</h2>
</body>
</html>
Producción:
Navegador compatible: los navegadores compatibles con la propiedad animation-fill-mode se enumeran a continuación:
- Google Chrome 43.0
- Internet Explorer 10.0
- Borde 12.0
- Firefox 16.0
- Ópera 30.0
- Safari 9.0