Mixin vendor de SISASS para la propiedad animation-fill-mode.
Controla qué estilos de una animación permanecen activos fuera de su tiempo de ejecución, tanto antes de que empiece como después de que termine. Esto permite decidir si el elemento debe conservar el estado del primer fotograma, el del último, ambos o ninguno cuando existe un retraso o cuando la animación finaliza.
Resulta útil para evitar saltos visuales entre el estado base del elemento y los fotogramas definidos en la animación. Aplica la propiedad con los prefijos históricos disponibles y después agrega la versión estándar.
@mixin animation-fill-mode($br);| Parámetro | Tipo | Default | Descripción |
|---|---|---|---|
| br | Keyword | - | Define el valor que se asignará a animation-fill-mode. |
En este ejemplo, ambos bloques usan la misma animación con retraso y una sola ejecución. Pulsa el botón para reiniciarla cuando quieras. El bloque backwards aplica el estilo inicial durante la espera; el bloque forwards conserva el estilo final cuando la animación termina.
<div class="animation_fill_mode_example">
<button class="button_replay" type="button" data-animation-replay="animation-fill-mode">Reproducir animación</button>
<div><h3 class="subtitle">backwards</h3><div class="box backwards" data-animation-box="animation-fill-mode">Backwards</div></div>
<div><h3 class="subtitle">forwards</h3><div class="box forwards" data-animation-box="animation-fill-mode">Forwards</div></div>
</div>