CSS Animation Generator
Intuitively create CSS animations (@keyframes).
Supports 12 presets, parameter adjustments, and real-time preview.
Animation Settings
CSS Code Output
About CSS Animation Generator
This "CSS Animation Generator" is a free tool that allows you to visually check animation movements using CSS @keyframes and automatically generate the necessary CSS code. It includes 12 types of base animations (presets) such as fade-in, slide, scale, and bounce.
You can intuitively adjust properties like Duration (seconds), Delay, Easing, Iterations, and Fill Mode using sliders and select boxes, and check them in real time in the preview area.
Once adjusted, simply copy the generated CSS code and paste it directly into your project. All processing is done within the browser, and there is no communication with external servers, so you can use it safely.
Steps to Create CSS Animations
Select Base Movement
First, switch tabs like "Fade" or "Slide" and select a preset that is close to the animation you want to create.
Adjust Parameters
Change the duration, delay, and easing speed with sliders, and check the actual movement in the preview area on the right.
Copy CSS Code
Once the movement is complete, click the "Copy Code" button in the output area and paste it into your CSS file.
CSS Animation Glossary (Properties Guide)
animation-duration(Duration)- Specifies the playback time (time to complete) for one iteration of the animation. Specified in seconds (s) or milliseconds (ms).
animation-timing-function(Easing)- Specifies the speed curve (acceleration/deceleration) of the animation. Examples include "linear" for constant speed and "ease-in-out" for a gradual start and end.
animation-delay(Delay)- Specifies the waiting time (delay) before the animation starts.
animation-iteration-count(Iterations)- Specifies the number of times the animation repeats. Specifying "infinite" loops it endlessly.
animation-direction(Direction)- Specifies the playback direction of the animation. Examples include "reverse" for backward playback, and "alternate" where odd iterations are forward and even iterations are backward.
animation-fill-mode(Fill Mode)- Specifies how the element's style (state) is maintained before and after the animation runs. Setting it to "forwards" maintains the style at the end of the animation.
transition-property(Property)- transition を適用するプロパティ名 (例: transform, opacity, all)。
transition-duration(Duration)- transition が完了するまでの時間。
transition-timing-function(Easing)- transition の速度変化のカーブ (Easing)。
Frequently Asked Questions (FAQ) about CSS Animation
- Q.What is the difference between CSS animation and transition?
transitioninterpolates between two states triggered by a state change (e.g., hover).animationcan automatically play without a trigger and allows fine-grained definition of intermediate states using @keyframes.- Q.Which animations perform best?
- Animations using
transform(translate, scale, rotate) andopacityare fast because of GPU acceleration. Animations onwidth,height, ormargincause browser reflow and are slower. - Q.What is prefers-reduced-motion?
- It is a media query for users who experience motion sickness from animations. It is recommended to use
@media (prefers-reduced-motion: reduce)to disable or reduce animations for accessibility. - Q.Is animation-fill-mode forwards mandatory?
- For animations like fade-in, if you do not specify
forwards, the element will revert to its original state (e.g., opacity: 0) at the end. It is mandatory if you want to keep the final frame style on screen. - Q.Is my data sent to a server?
- No. All processing is completed locally within your browser, and no data is sent externally.
Use Cases for CSS Animations
Page Load Animations
Implement a fade-in where content appears softly, or a slide-in from the bottom to improve the page's first impression.
Highlighting Buttons and CTAs
Apply animations like pulse (heartbeat) or bounce (jumping) to conversion buttons to naturally guide the user's gaze.
Scroll-triggered Animations
Combine the Intersection Observer API with the generated CSS animation classes to create effects that play the moment an element enters the screen.
Loading/Wait UIs
Implement endlessly rotating or blinking loading animations as feedback while fetching data or submitting a form.
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.