Advertisement
Build CSS keyframe animations visually. Edit keyframes on a timeline, set duration, easing and repeat, preview live, then copy the CSS or Tailwind code.
Build keyframe animations visually and copy the code.
Or shape every keyframe yourself.
animation: bounce 1s ease-in-out infinite
Select a point to edit it. Arrow keys switch keyframes, Shift + arrows move one, Delete removes it.
Keyframe at 0%
The first and last keyframes stay at 0% and 100%.
Copy and paste directly into your project.
Create a CSS @keyframes animation without writing it by hand. Start from a preset such as bounce, pulse, shake or fade in, or build your own on a timeline of up to eight keyframes that move, rotate, scale and fade an element. Set the duration, delay, easing curve, repeat count, direction and fill mode, and watch the result play live. Copy the @keyframes and animation property as CSS, or as a Tailwind v4 theme snippet.
What you get with CSS Animation Generator.
Add, move and remove up to eight keyframes and edit each one's move, rotate, scale and opacity.
Play, pause and replay the animation. It is drawn with the exact code you copy.
Duration, delay, easing with a custom curve, repeat, direction and fill mode.
Copy @keyframes with the animation property, or a Tailwind v4 theme snippet.
Follow these steps to get the best results.
Pick Bounce, Pulse, Shake, Fade in, Slide in, Spin, Wobble or Float, or edit the keyframes yourself.
Select a keyframe on the timeline and change how far it moves, rotates, scales or fades. Then set the duration and easing.
Copy the CSS or Tailwind version and add the animated class to your element.
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.animated {
animation: spin 1.5s linear infinite;
}Advertisement
Common questions about CSS Animation Generator.
Keyframes describe how an element should look at certain points of an animation, given as percentages from 0% (the start) to 100% (the end). The browser fills in the steps between them using the timing function.
Moving, rotating, scaling and fading are the properties browsers can animate smoothly on the GPU without recalculating the page layout. Animating width, height or margin is usually slower and can cause jank.
It controls what the element looks like before the animation starts and after it ends. forwards keeps the last keyframe, backwards applies the first keyframe during the delay, and both does both. With none, the element snaps back to its normal style.
Yes. Some people get dizzy or distracted by motion, and their devices tell the browser with prefers-reduced-motion. Wrap decorative animations in @media (prefers-reduced-motion: no-preference) or turn them off when the preference is reduce.
Paste the @theme block into your Tailwind v4 stylesheet. It defines the keyframes and an --animate-* variable, so you can use the animation as a class such as animate-bounce on any element.
Advertisement
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.