Create and experiment with CSS animations in real-time. Features 15 predefined animation types, customizable timing functions, duration controls, and instant CSS code generation.
Create custom CSS animations with keyframes. Preview in real-time and copy the generated CSS.
Configure your animation properties
Define your animation keyframes
See your animation in action
Copy this CSS to use in your project
@keyframes MyCustomAnimation {
0% {
opacity: 1;
background-color: #3b82f6;
border-radius: 8px;
}
100% {
opacity: 1;
background-color: #8b5cf6;
border-radius: 8px;
}
}
.animated-element {
animation-name: MyCustomAnimation;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both;
}