Hover over the boxes and cards to see the effects.
Box 1: background-color + color (ease) | Box 2: scale (cubic-bezier) | Box 3: border-radius morph (ease-in-out) | Box 4: translateY + shadow (ease-out)
Uses linear timing so the speed is constant throughout. The spin keyframe goes from rotate(0deg) to rotate(360deg).
Stops at 0%, 30% (air), 50% (squish on ground), 70% (small rebound), 100% (rest). Added scaleY to squish it when it hits the ground.
This card has a wiggle animation that plays when you hover over it. It uses 5 keyframe stops with translateX and rotate.
Wiggle has 5 stops: 0% (rest), 20% (left), 45% (right), 70% (left smaller), 100% (back to center).
This badge slides in from the left and stays visible after the animation ends because of animation-fill-mode: forwards. Without it the badge would snap back to opacity 0.
Default. Slow-fast-slow. Feels the most natural.
Constant speed. Feels mechanical or robotic.
Slow start then speeds up. Feels like launching.
Fast start then slows. Feels like braking/floating.
Slow on both ends. Smooth for longer transitions.
Custom spring curve. Overshoots then settles back.
Jumps in 5 steps. No smooth motion, like a film strip.