Back to Tools
Animation Easing Studio
Interactive CSS timing functions with live preview
0 tests
Easing Functions
20 functionsLinear
gentleConstant speed throughout
linear
Ease
gentleDefault browser easing
ease
Ease In
moderateSlow start, fast end
ease-in
Ease Out
moderateFast start, slow end
ease-out
Ease In Out
moderateSlow start and end
ease-in-out
Ease In Sine
gentleGentle sine curve in
cubic-bezier(0.12, 0, 0.39, 0)
Ease Out Sine
gentleGentle sine curve out
cubic-bezier(0.61, 1, 0.88, 1)
Ease In Out Sine
gentleGentle sine curve both
cubic-bezier(0.37, 0, 0.63, 1)
Ease In Quad
moderateQuadratic acceleration
cubic-bezier(0.11, 0, 0.5, 0)
Ease Out Quad
moderateQuadratic deceleration
cubic-bezier(0.5, 1, 0.89, 1)
Ease In Out Quad
moderateQuadratic both directions
cubic-bezier(0.45, 0, 0.55, 1)
Ease In Cubic
strongStrong cubic acceleration
cubic-bezier(0.32, 0, 0.67, 0)
Ease Out Cubic
strongStrong cubic deceleration
cubic-bezier(0.33, 1, 0.68, 1)
Ease In Out Cubic
strongStrong cubic both directions
cubic-bezier(0.65, 0, 0.35, 1)
Ease In Quart
strongVery strong acceleration
cubic-bezier(0.5, 0, 0.75, 0)
Ease Out Quart
strongVery strong deceleration
cubic-bezier(0.25, 1, 0.5, 1)
Ease In Out Quart
strongVery strong both directions
cubic-bezier(0.76, 0, 0.24, 1)
Ease In Back
strongPulls back before moving
cubic-bezier(0.36, 0, 0.66, -0.56)
Ease Out Back
strongOvershoots then settles
cubic-bezier(0.34, 1.56, 0.64, 1)
Ease In Out Back
strongPulls back and overshoots
cubic-bezier(0.68, -0.6, 0.32, 1.6)
Custom Easing
Animation Preview
Linear • Constant speed throughout
Start (0%)linearEnd (100%)
Generated Code
.animated-element {
transition: all 500ms linear;
}
/* Keyframe Animation */
@keyframes slideAnimation {
from { transform: translateX(0); }
to { transform: translateX(0px); }
}
.slide-animation {
animation: slideAnimation 500ms linear forwards;
}Enhanced Features
Interactive Testing
- • Real-time animation preview
- • Adjustable duration controls
- • Quick preset durations
- • Animation counter tracking
Advanced Visualization
- • Bezier curve visualization
- • Intensity indicators
- • Category organization
- • Responsive animation track
Code Generation
- • CSS transitions & keyframes
- • Custom cubic-bezier testing
- • Copy-ready code snippets
- • Dynamic distance calculation