Spin

Add the animate-spin utility to add a linear spin animation to elements like loading indicators.

Loading

                        
<a href="#" class="btn btn-solid-cyan text-white">
    <span>
        <i class="btn-icon fa fa-spinner animate-spin"></i>
    </span>Loading
</a>
                        
                     

Pulse

Add the animate-pulse utility to make an element gently fade in and out — useful for things like skeleton loaders.

                        
<div class="p-3 w-64 shadow-sm rounded-sm mt-3">
    <div class="bg-grey-200 rounded-full w-10 h-10 animate-pulse mb-3"></div>

    <div class="bg-grey-200 h-10 animate-pulse mb-3"></div>

    <div class="bg-grey-200 h-10 animate-pulse"></div>
</div>
                        
                     

Ping

Add the animate-ping utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges.

                        
<div class="badge-container mt-3 mr-3">
    <div class="avatar avatar-sm">
        <img class="img-responsive img-round" src="/components/images/avatar-img.jpeg"
            alt="avatar" />
    </div>
    <span class="status-badge animate-ping status-away"></span>
</div>
                        
                     

Bounce

Add the animate-bounce utility to make an element bounce up and down — useful for things like “scroll down” indicators.

                        
<div class="rounded-full w-10 h-10 bg-indigo-600 text-white mt-5 flex justify-center align-items-center animate-bounce">
    <i class="fas fa-arrow-up text-white"></i>
</div>
                        
                     

animate-none	animation: none;
animate-spin	animation: spin 1s linear infinite; @keyframes spin { from {  transform: rotate(0deg); } to {  transform: rotate(360deg); } }
animate-ping	animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
animate-pulse	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
animate-bounce	animation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }