Landings

Tailwind CSS

Animation

Utilities for animating elements with CSS animations.

ClassProperties
animate-noneanimation: none;
animate-spinanimation: spin 1s linear infinite;

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
animate-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;

@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
animate-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .5;
}
}
animate-bounceanimation: 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);
}
}