CSS keyframes generator
Add steps at percentages of the animation and set the move, rotation, scale and opacity of each. The box plays your animation as you type, and the CSS is ready to copy.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Name the animation and set its duration, timing function, repeat count and direction.
- Edit the first and last steps, and add steps in between with their own positions.
- Watch the preview. Use Replay to play it again.
- Copy the
@keyframes rule and the .element rule with the animation shorthand.
How it works
Each step becomes a block such as 50% { transform: translate(0px, -20px) scale(1.2); opacity: 1; }. Only the parts that are not neutral are written: no move, no rotation and scale 1 are left out, and a step with none of them gets transform: none. Steps are sorted by percentage. The preview uses the same frames with element.animate().
Example
Two steps, 0% at translate(-60px, 0px) with opacity 0 and 100% at no transform with opacity 1, give a one-second slide-in with a fade.
Tips
- Rename
.element to your own selector and add animation-fill-mode: forwards if the element should stay in its last state.
- Wrap the animation in
@media (prefers-reduced-motion: no-preference) for people who ask for less motion.
Frequently asked questions
What does a keyframe percentage mean?
It is a point in time within one run of the animation: 0% is the start and 100% the end. The browser fills in the values between the steps, easing them with the timing function.
Does the timing function apply to the whole animation or to each step?
In CSS it applies between each pair of neighbouring keyframes. The preview does the same, so it matches what you get on a page.
Why only transform and opacity?
They are the properties browsers can animate without re-laying out the page, which keeps the motion smooth on weak devices. You can add other properties to the copied CSS by hand.
How do I make it loop back and forth?
Set Repeat to Forever and Direction to Alternate. Every second run then plays backwards.
What if I leave out 0% or 100%?
The browser uses the element's own style for the missing start or end. Add both steps if you want the result to be independent of the element's CSS.