Animation Studio

MVP
CSS Output
@keyframes custom-animation {
  0% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translate(100px, 0px) rotate(180deg);
    opacity: 1;
  }
}

.animated-element {
  animation: custom-animation 1s ease 0s 1 alternate both;
  transform-origin: center center;
}

Quick Tips

  • • Drag dials up/down to change values
  • • Switch between 0% and 100% keyframes
  • • Toggle Loop for continuous playback
  • • Copy CSS to use in your projects
Copy from Figma and paste here (⌘V)
Editing: 0%

Animation Controls

Transform

X
0.00
px
Y
0.00
px
Rotate
0.00
deg

Properties

Scale1.00
Opacity1.00

Timing

Duration1.00s
Delay0.00s