CSS Keyframe Generator

Visually design and calibrate custom CSS @keyframes animations with step timelines, easing curves, and live playback.

⚡ Animation Presets:

⏱️ Keyframe Timeline Steps

Step Position:50%

Step 50% Properties

Translate X:0px

Translate Y:-24px

Scale Factor:1.1x

Rotation:8deg

Opacity:100%

Border Radius:24px

Animation Properties & Timing

Duration (s)

Easing Function

Direction

UtilVoxANIMATE

Generated @keyframes Output

@keyframes float-glow {
  0% {
    transform: none;
  }
  50% {
    transform: translate(0px, -24px) scale(1.1) rotate(8deg);
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(245, 200, 66, 0.4);
  }
  100% {
    transform: none;
  }
}

.animated-element {
  animation: float-glow 1.8s ease-in-out infinite alternate both;
}

Mastering CSS @keyframes, Timing Curves & Micro-Interactions

CSS Animation Shorthand & Property Syntax

The CSS animation property binds a @keyframes timeline to a selector with timing, duration, and loop parameters:

Property	Example Value	Purpose
animation-name	pulse-glow	Matches the identifier declared in @keyframes name
animation-duration	1.5s / 800ms	Total time required for one complete animation cycle
animation-timing-function	ease-in-out / cubic-bezier()	Mathematical acceleration curve of the motion
animation-iteration-count	infinite / 3	Number of times the animation sequence repeats
animation-direction	alternate / normal	Plays forward then backward on each alternating iteration
animation-fill-mode	forwards / both	Retains the computed styles from the 100% keyframe at conclusion

Performance Tips for 60fps Micro-Animations

For maximum battery efficiency and zero UI jank, stick to animating transform and opacity. Properties like width, height, top, or margin trigger CPU layout reflows on every tick, whereas transforms utilize the GPU compositor.

Combine your animations with our CSS transform generator, color grade with our CSS filter generator, or inspect web contrast in our contrast checker.