liminfoEasing Functions Reference
Free web tool: Easing Functions Reference
linear
linear
ease
cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in
cubic-bezier(0.42, 0, 1, 1)
ease-out
cubic-bezier(0, 0, 0.58, 1)
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1)
easeInQuad
cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad
cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInCubic
cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic
cubic-bezier(0.215, 0.61, 0.355, 1)
easeInQuart
cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutBounce
cubic-bezier(0.34, 1.56, 0.64, 1)
Custom Cubic Bezier
cubic-bezier(0.25, 0.1, 0.25, 1)About Easing Functions Reference
The CSS Easing Functions Reference provides a visual gallery of 11 commonly used animation timing functions with SVG curve previews. It includes CSS built-in keywords (linear, ease, ease-in, ease-out, ease-in-out) and popular easing presets (easeInQuad, easeOutQuad, easeInCubic, easeOutCubic, easeInQuart, easeOutBounce), each displayed with its cubic-bezier() value ready to copy on click.
A custom cubic-bezier editor allows you to input x1, y1, x2, y2 control point values and instantly generate the corresponding CSS cubic-bezier() timing function string. This is particularly useful for fine-tuning animation curves in CSS transitions, CSS animations, and JavaScript animation libraries.
Every easing function is visualized as an SVG path showing the acceleration/deceleration curve, making it easy to compare different timing profiles. This tool helps front-end developers, UI/UX designers, and motion graphics specialists choose the right easing for smooth, natural-feeling animations.
Key Features
- Visual SVG curve previews for 11 easing functions including linear, ease, and cubic-bezier presets
- Click-to-copy CSS cubic-bezier() values for instant use in stylesheets and animation code
- Custom cubic-bezier editor with x1, y1, x2, y2 control point inputs for creating unique timing curves
- Built-in CSS keywords (ease, ease-in, ease-out, ease-in-out) with their cubic-bezier equivalents
- Popular easing presets: easeInQuad, easeOutQuad, easeInCubic, easeOutCubic, easeInQuart, easeOutBounce
- Real-time cubic-bezier string generation from custom control point values
- Responsive grid layout for easy comparison of multiple easing curves side by side
- Dark mode support for comfortable use in any development environment
Frequently Asked Questions
What CSS easing functions are included?
The reference includes 11 easing functions: linear, ease (default CSS transition), ease-in, ease-out, ease-in-out, easeInQuad, easeOutQuad, easeInCubic, easeOutCubic, easeInQuart, and easeOutBounce. Each shows its cubic-bezier() control points and visual curve.
How do I copy an easing function value?
Click on any easing function card in the grid to automatically copy its CSS cubic-bezier() value to your clipboard. For example, clicking ease-in-out copies cubic-bezier(0.42, 0, 0.58, 1) which you can paste directly into your CSS transition or animation-timing-function property.
What is a cubic-bezier() function?
CSS cubic-bezier(x1, y1, x2, y2) defines a timing curve with two control points. The x values (0-1) represent time progression, y values represent output progression. For instance, cubic-bezier(0.42, 0, 1, 1) is ease-in, starting slow and accelerating. Values outside 0-1 for y create overshoot effects like easeOutBounce.
How do I create a custom easing curve?
Use the custom cubic-bezier editor at the bottom of the tool. Enter x1, y1, x2, y2 values (x values should be 0-1, y values can exceed this range for bounce effects). The generated cubic-bezier() string updates in real-time and can be copied with the Copy button.
What is the difference between ease-in and ease-out?
Ease-in (cubic-bezier(0.42, 0, 1, 1)) starts slowly and accelerates toward the end, good for elements leaving the screen. Ease-out (cubic-bezier(0, 0, 0.58, 1)) starts fast and decelerates, ideal for elements entering the screen. Ease-in-out combines both for smooth start and end.
What is easeOutBounce used for?
easeOutBounce (cubic-bezier(0.34, 1.56, 0.64, 1)) creates an overshoot effect where the animation goes past its final value before settling back. The y2 value of 1.56 exceeds 1.0, creating this spring-like bounce. It is commonly used for playful UI elements, notification badges, or attention-grabbing animations.
Where can I use these easing values?
These cubic-bezier values work with CSS transition-timing-function, animation-timing-function, and JavaScript animation libraries (GSAP, Anime.js, Framer Motion). They control how animations progress over time in properties like opacity, transform, width, height, and color transitions.
What do the quadratic and cubic easing types mean?
The naming reflects the mathematical curve: Quad (quadratic) uses a squared function for moderate acceleration, Cubic uses a cubed function for more pronounced acceleration, and Quart (quartic) uses a fourth-power function for even stronger acceleration. Each comes in In (accelerate), Out (decelerate), and InOut (both) variants.