Select Animation
ms
ms
Preview
CSS
1.00s
0%25%50%75%100%
Tip: click the timeline to add keyframes. Drag a keyframe to adjust its timing.
Opacity
Your CSS
.box {
animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}Your HTML
<div class="box">
CSS Animation
</div>How it works
- 1Choose an animation. Pick a preset or build a custom one from scratch.
- 2Adjust properties. Change duration, delay, timing and keyframes.
- 3Copy your code. Get clean CSS and HTML to use in your project.
About CSS Animation Generator
Create beautiful CSS animations visually. Customize keyframes, timing, easing, and animation properties, then generate clean CSS instantly.
Related Tools
More free CSS generators you might like.