Animation Fill

Defines how an animation is executed on an element.

Classes
Class Properties
animation-fill-none animation-fill-mode: none;
animation-fill-forwards animation-fill-mode: forwards;
animation-fill-backwards animation-fill-mode: backwards;
animation-fill-both animation-fill-mode: both;
Examples
fill-none
fill-forwards
fill-backwards
fill-both

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="animation-color animation-fill-none flex align-items-center justify-content-center font-bold border-round m-2 px-5 py-3 shadow-3">fill-none</div>
    <div class="animation-color animation-fill-forwards flex align-items-center justify-content-center font-bold border-round m-2 px-5 py-3 shadow-3">fill-forwards</div>
    <div class="animation-color animation-fill-backwards flex align-items-center justify-content-center font-bold border-round m-2 px-5 py-3 shadow-3">fill-backwards</div>
    <div class="animation-color animation-fill-both flex align-items-center justify-content-center font-bold border-round m-2 px-5 py-3 shadow-3">fill-both</div>
</div>


<style lang="scss">
@keyframes animation-color {
    0%{
        background-color: var(--blue-500)
    }
    100%{
        background-color: var(--green-500)
    }
}
.animation-color {
    animation: animation-color 3s linear;
}
</style>