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 |
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Convert width/height to aspect ratios, scale dimensions, and generate responsive embed CSS for any layout.
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.