⌘ K
esc

    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">
        <div class="flex flex-wrap align-items-center justify-content-center card-container blue-container">
            <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>
    </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>