⌘ K
esc

    Animations

    A variety of animations are available to be used when an element enters or leaves.

    Classes
    Class Properties
    fadein animation: fadein .15s linear; @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } }
    fadeout animation: fadeout .15s linear; @keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } }
    slidedown animation: slidedown .45s ease-in-out; @keyframes slidedown { 0% { max-height: 0; } 100% { max-height: auto; } }
    slideup animation: slideup .45s cubic-bezier(0, 1, 0, 1); @keyframes slideup { 0% { max-height: 1000px; } 100% { max-height: 0; } }
    scalein animation: scalein .15s linear; @keyframes scalein { 0% { opacity: 0; transform: scaleY(0.8); transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); } 100% { opacity: 1; transform: scaleY(1); } }
    fadeinleft animation: fadeinleft .15s linear; @keyframes fadeinleft { 0% { opacity: 0; transform: translateX(-100%); transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); } 100% { opacity: 1; transform: translateX(0%); } }
    fadeoutleft animation: fadeoutleft .15s linear; @keyframes fadeoutleft { 0% { opacity: 0; transform: translateX(0%); transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); } 100% { opacity: 1; transform: translateX(-100%); } }
    fadeinright animation: fadeinright .15s linear; @keyframes fadeinright { 0% { opacity: 0; transform: translateX(100%); transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); } 100% { opacity: 1; transform: translateX(0%); } }
    fadeoutright animation: fadeoutright .15s linear; @keyframes fadeoutright { 0% { opacity: 0; transform: translateX(0%); transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); } 100% { opacity: 1; transform: translateX(100%); } }
    fadeinup animation: fadeinup .15s linear; @keyframes fadeinup { 0% { opacity: 0; transform: translateY(-100%); transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); } 100% { opacity: 1; transform: translateY(0%); } }
    fadeoutup animation: fadeoutup .15s linear; @keyframes fadeoutup { 0% { opacity: 0; transform: translateY(0%); transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); } 100% { opacity: 1; transform: translateY(-100%); } }
    fadeindown animation: fadeindown .15s linear; @keyframes fadeindown { 0% { opacity: 0; transform: translateY(100%); transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); } 100% { opacity: 1; transform: translateY(0%); } }
    fadeoutdown animation: fadeoutdown .15s linear; @keyframes fadeoutdown { 0% { opacity: 0; transform: translateY(0%); transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); } 100% { opacity: 1; transform: translateY(100%); } }
    animate-width animation: animate-width 1000ms linear; @keyframes animate-width { 0% { width: 0; } 100% { width: 100%; } }
    fadeinleft
    fadeinleft
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container blue-container">
            <div class="fadeinleft animation-duration-1000 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">fadeinleft</div>
        </div>
    </div>
    
    
    fadeoutleft
    fadeoutleft
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container yellow-container">
            <div class="fadeoutleft animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
         font-bold bg-yellow-500 text-gray-900 border-round m-2 px-5 py-3">fadeoutleft</div>
        </div>
    </div>
    
    
    scalein
    scalein
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container green-container">
            <div class="scalein animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-green-500 text-white border-round m-2 px-5 py-3">scalein</div>
        </div>
    </div>