Animation Builder
Create custom keyframe animations

Animation Properties

Keyframes

Keyframe 1

0%
1

Keyframe 2

50%
0.8

Keyframe 3

100%
1
Live Preview & CSS
See your animation in action

Live Preview

hexatools

Generated CSS

@keyframes myAnimation {
  0% {
    transform: translateX(0px) scale(1);
    opacity: 1;
    background-color: #3b82f6;
  }
  50% {
    transform: translateX(100px) scale(1.2);
    opacity: 0.8;
    background-color: #ef4444;
  }
  100% {
    transform: translateX(0px) scale(1);
    opacity: 1;
    background-color: #3b82f6;
  }
}

.animated-element {
  animation: myAnimation 2s ease-in-out 0s infinite normal none;
}
Animation Tips:

• Use transform for better performance

• Keep animations under 1s for UI interactions

• Use ease-out for natural feeling animations

• Test on different devices for performance