Loading...
Create keyframe animations with visual controls
A CSS keyframe animation defines intermediate steps in a sequence of CSS styles, allowing elements to smoothly transition through multiple states over a specified duration.
@keyframes my-animation {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
/* no changes */;
}
}
.animated-element {
animation: my-animation 1s ease 0s 1 normal forwards;
}| Easing | Description |
|---|---|
| linear | Constant speed throughout |
| ease | Slow start, fast, slow end |
| ease-in | Slow start, fast end |
| ease-out | Fast start, slow end |
| ease-in-out | Slow start and end |
Formula
animation: name duration timing-function delay iteration-count direction fill-mode play-state@keyframes = the named list of states, given as percentages from 0% to 100%
timing-function = how the value moves between keyframes, such as ease, linear or a cubic-bezier curve
fill-mode = whether the element keeps the first or last keyframe outside the animation, which forwards is usually what you want
iteration-count = a number, or infinite
Did you know? Only transform and opacity animate on the compositor. Animating width, top or margin forces the browser to recalculate layout on every frame, which is the usual cause of a CSS animation that stutters on a phone but looks fine on a desktop.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.
Preview how colors appear with different types of color blindness. Test accessibility for color vision deficiency.