Animation / Keyframes Generator

Animation Settings

@keyframes myAnimation {
  0% {
    transform: translateY(20px);
    opacity: 0;
    background-color: #6366f1;
  }
  100% {
    background-color: #6366f1;
  }
}

.animated-element {
  animation: myAnimation 600ms ease-out 0ms 1 normal forwards;
}

Add the @keyframes block to your global CSS or tailwind.config.js → theme.extend.keyframes.