Animation Generator

Create CSS animations with a visual editor. Design keyframe animations with transforms, timing functions, and more.


0%
100%
@keyframes custom-animation {
  0% {
    transform: translate(0px, 0px)
               rotate(0deg)
               scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(0px, 0px)
               rotate(0deg)
               scale(1);
    opacity: 1;
  }
}

.animated-element {
  animation: custom-animation 1s ease
             1 normal
             forwards 0s;
}