← Back to Tools
CSS Animation Generator
Preview
Box
Preview Customization
Text Content
Size (px)
Background Color
Border Radius
8
px
Presets
Animation Properties
Duration
1
s
Timing Function
Ease
Linear
Ease In
Ease Out
Ease In Out
Custom Cubic Bezier
P1X P1Y
P2X P2Y
cubic-bezier(0.25, 0.1, 0.25, 1)
Delay
0
s
Iteration Count
1
2
3
5
Infinite
Direction
Normal
Reverse
Alternate
Alternate Reverse
Fill Mode
None
Forwards
Backwards
Both
▶ Play
⏸ Pause
↻ Reset
Keyframes Editor
Add Keyframe
+ Add Keyframe Stop
CSS Code
@keyframes animation { 0% { transform: none; opacity: 1; background-color: #7b2ff7; } 100% { transform: none; opacity: 1; background-color: #7b2ff7; } } .element { animation-name: animation; animation-duration: 1s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; }
📋 Copy CSS
\xF0\x9F\x92\x99 Tip
\xF0\x9F\x93\x9A Get Bundle \x244.99