Animation Duration

Defines how long an animation should take to complete.

Classes#

Class	Properties
animation-duration-100	animation-duration: 100ms;
animation-duration-150	animation-duration: 150ms;
animation-duration-200	animation-duration: 200ms;
animation-duration-300	animation-duration: 300ms;
animation-duration-400	animation-duration: 400ms;
animation-duration-500	animation-duration: 500ms;
animation-duration-1000	animation-duration: 1000ms;
animation-duration-2000	animation-duration: 2000ms;
animation-duration-3000	animation-duration: 3000ms;

Examples#

scalein

<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="scalein animation-duration-200 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        scalein
    </div>
    <div class="scalein 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">
        scalein
    </div>
    <div class="scalein animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        scalein
    </div>
</div>