CSS Animation Generator

Animation Preview

Generated CSS

@keyframes cssmotion-preview-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation: cssmotion-preview-animation 1s ease 1 normal forwards;
}

TailwindCSS

<div class="animated-element inline-flex items-center justify-center rounded-xl bg-blue-500 text-white px-6 py-4" style="transition-duration:1s; transition-timing-function:ease;">
  Animated Element
</div>

<style>
@keyframes cssmotion-preview-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation: cssmotion-preview-animation 1s ease 1 normal forwards;
}
</style>