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 flex flex-wrap align-items-center justify-content-center">
    <div class="scalein animation-linear animation-duration-500 animation-iteration-infinite flex align-items-center justify-content-center font-bold text-blue-500 border-round m-2 px-5 py-3 shadow-3">linear</div>
    <div class="scalein animation-ease-in animation-duration-500 animation-iteration-infinite flex align-items-center justify-content-center font-bold text-blue-500 border-round m-2 px-5 py-3 shadow-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 text-blue-500 border-round m-2 px-5 py-3 shadow-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 text-blue-500 border-round m-2 px-5 py-3 shadow-3">ease-in-out</div>
</div>