Preview

Keyframes Timeline

0%
100%
0%25%50%75%100%

Generated Code

@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

Animation Settings

Animation Presets

Saved Animations

No saved animations yet

Tips

  • transform: Use translateX, translateY, scale, rotate, skew
  • Easing: ease-in for exits, ease-out for entries
  • fill-mode: Use 'forwards' to keep end state
  • Performance: Animate transform & opacity for 60fps
  • Alternate: Makes animation yo-yo back and forth

Need Custom Animations for Your Website?

Brix340 creates stunning, performant animations that bring your site to life

Contact Brix340