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 flex flex-wrap align-items-center justify-content-center">
    <div class="fadeinleft animation-duration-1000 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">fadeinleft</div>
</div>

fadeoutleft
fadeoutleft

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="fadeoutleft animation-duration-1000 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">fadeoutleft</div>
</div>

scalein
scalein

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="scalein animation-duration-1000 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">scalein</div>
</div>