Back to Menu
CSS Neo Animation Studio
Create futuristic CSS animations with live preview & instant code generation.
Animation Settings
Animation Name
Duration
Timing
ease
linear
ease-in
ease-out
ease-in-out
Delay
Iterations
1
2
infinite
Direction
normal
reverse
alternate
alternate-reverse
Fill Mode
none
forwards
backwards
both
Keyframes
@keyframes neoSpin { 0%{ transform: translateX(-180px) rotate(0deg) scale(0.7); border-radius:30px; filter:hue-rotate(0deg); } 50%{ transform: translateY(-80px) rotate(180deg) scale(1.2); border-radius:50%; filter:hue-rotate(180deg); } 100%{ transform: translateX(180px) rotate(360deg) scale(0.7); border-radius:30px; filter:hue-rotate(360deg); } }
Generate Animation
Generated CSS
Copy Code