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="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">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">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">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">fill-both</div>
</div>

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