⌘ K
esc

    Animation Timing Function

    Specifies the speed curve of an animation.

    Classes
    Class Properties
    animation-linear animation-timing-function: linear;
    animation-ease-in animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    animation-ease-out animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    animation-ease-in-out animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    Examples
    linear
    ease-in
    ease-out
    ease-in-out
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container blue-container">
            <div class="scalein animation-linear animation-duration-500 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-blue-500 text-white border-round m-2 px-5 py-3">linear</div>
            <div class="scalein animation-ease-in animation-duration-500 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-blue-500 text-white border-round m-2 px-5 py-3">ease-in</div>
            <div class="scalein animation-ease-out animation-duration-500 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-blue-500 text-white border-round m-2 px-5 py-3">ease-out</div>
            <div class="scalein animation-ease-in-out animation-duration-500 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-blue-500 text-white border-round m-2 px-5 py-3">ease-in-out</div>
        </div>
    </div>