CSS animation generator
Adjust motion presets or keyframes and play the animation to check it. Get CSS for use on a web page and an HTML usage example.
What you can do
Adjust motion from a preset
Choose from 12 types, including entrances, exits, and rotation. Change the duration and repetition to suit your use.
Edit intermediate states too
Specify movement, rotation, scale, and opacity for each keyframe and check the generated motion.
Get CSS and HTML
Copy or save the animation CSS and an HTML usage example with the same class.
How to use
Choose a preset
Choose the motion you want and set the duration of 1 play. Selecting a different preset also replaces any settings you have adjusted.
Adjust only the parts you need
Open playback details or keyframes to change intermediate motion, direction, repetition, and other settings.
Generate and play
Check it with “Generate CSS and preview.” If you change any settings, generate it again.
Get CSS and HTML
Apply the CSS and add the toollet-motion class to an HTML element. Use the HTML usage example together with the CSS.
Useful when
Create an entrance animation
Use a fade-in or entrance-from-below preset to adjust the entrance motion and speed.
Motion when interacting with a button
Change the start condition to hover or keyboard focus to create motion that responds to interaction.
Understanding keyframes and playback conditions
Intermediate states and duration
A keyframe’s % is its position within 1 play. For a 1-second animation, 50% is at 0.5 seconds. Easing determines how the values change between keyframes.
Movement, rotation, and appearance
Horizontal/vertical position is the amount of movement from the original position. A scale of 1 is the original size; an opacity of 0 is transparent and 1 is opaque.
Delay, repetition, and direction
The delay is added only once before playback starts. For finite playback, the total time is delay + duration of 1 play × repeat count. Alternating switches between forward and backward directions.
States before and after playback
Choose which state appears during the delay and after playback ends. Reverse and alternating settings change which keyframe positions are used at the start and end of playback.
Reduced motion settings
The generated CSS supports your device’s reduced motion setting. It stops the animation and uses the endpoint state determined by the configured direction and repeat count. For infinite playback, it uses the endpoint of the first play.
Frequently asked questions
Can I play it only once?
Turn off “Keep repeating” and set the repeat count to 1. Standard presets start with 1 play, while rotation and floating start with continuous repetition enabled.
Which element should I apply the CSS to?
Add the toollet-motion class to an HTML element and use it with the generated CSS. The HTML usage example is a button element fragment, not a complete standalone web page.
How many keyframes can I create?
You can have 2–8 keyframes, including the start at 0% and the end at 100%. Adding a keyframe places it at the midpoint of the widest interval. The start and end cannot be deleted, and only their % positions are fixed.
The preview disappeared after I changed a setting.
Results are cleared when settings change so that you do not accidentally use motion or code from previous settings. Generate again to check the current settings.
Why is the preview not moving?
Motion stops when reduced motion is enabled on your device. For hover and focus settings, also check the start conditions. The preview pauses when you switch away from this tab.
Can I use multiple animations on the same page?
The generated class and keyframe names are shared. To use separate animations, change both names for each animation and reflect those changes in the corresponding HTML.
Input and results
- Settings
- 12 presets, 2–8 keyframes, and a duration of 0.2–60 seconds.
- Playback
- A delay of 0–60 seconds, 1–100 repetitions or infinite repetition, easing, direction, states before and after playback, and start conditions.
- Output
- CSS and an HTML usage example. Only the motion is defined; a complete web page or video file is not created.