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="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 bg-primary 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-primary 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-primary 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-primary border-round m-2 px-5 py-3">
        ease-in-out
    </div>
</div>