CSS Animation Generator
Build @keyframes animations and copy the CSS, with a live preview.
1s
0s
Live preview
CSS
@keyframes myAnimation {
from { opacity: 0; }
to { opacity: 1; }
}
.animated {
animation: myAnimation 1s ease 0s infinite;
}How CSS @keyframes animations work
A CSS animation has two parts: a @keyframes rule that describes what changes over time, and the animation shorthand that attaches it to an element with a duration, timing function, delay, and iteration count. Pick a preset above to see the keyframes and tweak the timing — the preview updates live, and everything runs in your browser.
More CSS tools: the transition generator, the transform generator, and the loader generator.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.