Editeur d'animations CSS

Construisez des animations CSS keyframes visuellement avec un editeur de timeline. Export CSS et Tailwind.

CSS
@keyframes custom-anim {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}

.animated-element {
  animation: custom-anim 500ms ease-out 1;
}
Tailwind CSS
/* Add to your CSS */
@keyframes custom-anim {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}

/* Use in Tailwind */
<div class="animate-[custom-anim_500ms_ease-out]">
  ...
</div>