Quick implementation
@keyframes bounce {
from {
transform: translateY(0);
}
to {
transform: translateY(15rem);
}
}
.bounce-ball {
animation: bounce 1.2s ease-in-out infinite;
/* Fallback for browsers without linear() support */
}
/* Modern bounce easing with linear() */
@supports (animation-timing-function: linear(0, 0.25)) {
.bounce-ball {
animation-timing-function: linear(
0,
0.002,
0.01,
0.025,
0.062,
0.15,
0.28,
0.43,
0.61,
0.8,
0.91,
0.98,
1,
0.92,
0.89,
0.88
);
}
}
/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
.bounce-ball {
animation: none;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer. Your task is to create a CSS-based bounce animation system using modern easing functions.
Role & Goal:
Build a reusable bounce animation that simulates realistic physics (gravity, deceleration, bounce-back) using CSS linear() timing function. This replaces legacy JavaScript bounce libraries with native, performant CSS.
Technical Constraints:
1. Use CSS linear() function with 10-16 control points (data points) for smooth bounce curve
2. Must include @supports query for browser fallback to cubic-bezier() or ease-in-out
3. Respect @media (prefers-reduced-motion: reduce) to disable animation for users
4. Animation should simulate: free-fall → impact → bounce → settle
5. No JavaScript required — purely CSS solution
Vanilla CSS implementation:
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(15rem); } }
.element { animation: bounce 1.2s linear(...) infinite; }
React/TypeScript variant:
Create a useBounce hook that returns animation styles, accepting duration and distance props. Expose the linear() timing function as a constant.
Edge cases to handle:
1. Browsers without linear() support (Safari < 17.2, older Firefox) — graceful fallback
2. Different bounce heights (adjusting the linear() control points for shallow vs. deep bounces)
3. Responsive bounce distance based on viewport or container size
4. Staggered animations (multiple bouncing elements with animation-delay)
5. Combined transforms (bounce + spin, bounce + scale)
6. Performance on mobile (use will-change, optimize for 60fps)
7. Bounce curve customization (bounciness intensity parameter)Why this matters in 2026
Bounce animations are ubiquitous in modern UI — from loading states to interactive feedback. Previously, developers relied on JavaScript libraries (like bounce.js) or hand-tuned cubic-bezier values. The CSS linear() function, now a Baseline 2023 feature across all major browsers, lets you define precise bounce curves with 10+ control points, delivering physics-accurate animations with zero JavaScript.
This is a major shift in animation capability: better performance, easier maintenance, and more expressive animations than cubic-bezier ever allowed.
The logic
The linear() function accepts a comma-separated list of progress points (0 to 1). Each point defines the output value at that point in the animation timeline. For bounce, you create a curve that overshoots 1 (goes past the target, simulating overshoot) and returns to settle at 1.
The bounce in this snippet has 16 points: starting at 0 (top), accelerating to 1 (bottom), then bouncing back up to 0.92, down to 0.89, and finally settling at 0.88. Adjust these values to change bounce height and damping: higher overshoot (1.1+) for springier bounces, lower settle point (0.85) for more damping.
Accessibility & performance
Baseline 2023: linear() landed in Chrome 113, Firefox 119, Safari 17.2, and Edge 113. Use @supports (animation-timing-function: linear(0, 0.25)) to detect support and fallback to ease-in-out for older browsers.
Always include @media (prefers-reduced-motion: reduce) to disable animations for users with motion sensitivity. Bounce animations are performant (GPU-accelerated transforms) but avoid running dozens simultaneously on low-end devices. Test with DevTools performance profiler to ensure 60fps.