CSS Animation & Keyframes Studio
Professional CSS animation suite: Interactive keyframe timeline (0%–100%), 20+ curated motion presets, real-world UI target previews, easing curves, and exports for pure CSS, Tailwind CSS, and Framer Motion.
Live Animation Code & Implementation
Auto-updates in real time as you tweak timing, easing, keyframes, and motion properties.
@keyframes smoothBounce {
0% {
transform: translateY(0) scale(1, 1);
opacity: 1;
filter: blur(0px);
}
20% {
transform: translateY(0) scale(1.1, 0.9);
opacity: 1;
filter: blur(0px);
}
40% {
transform: translateY(-30px) scale(0.9, 1.1);
opacity: 1;
filter: blur(0px);
}
50% {
transform: translateY(0) scale(1.05, 0.95);
opacity: 1;
filter: blur(0px);
}
65% {
transform: translateY(-12px) scale(0.98, 1.02);
opacity: 1;
filter: blur(0px);
}
80% {
transform: translateY(0) scale(1.02, 0.98);
opacity: 1;
filter: blur(0px);
}
100% {
transform: translateY(0) scale(1, 1);
opacity: 1;
filter: blur(0px);
}
}
/* CSS Animation Shorthand & Properties */
.animate-smoothBounce {
animation: smoothBounce 1.00s cubic-bezier(0.28, 0.84, 0.42, 1) infinite normal both;
transform-origin: center center;
}
/* Individual Longhand Properties */
.animate-smoothBounce-longhand {
animation-name: smoothBounce;
animation-duration: 1.00s;
animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: both;
transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
.animate-smoothBounce, .animate-smoothBounce-longhand {
animation: none;
}
}.animate-smoothBounce• Apply directly to your HTML / JSX tagExport & saved snippets
@keyframes smoothBounce {
0% {
transform: translateY(0) scale(1, 1);
opacity: 1;
filter: blur(0px);
}
20% {
transform: translateY(0) scale(1.1, 0.9);
opacity: 1;
filter: blur(0px);
}
40% {
transform: translateY(-30px) scale(0.9, 1.1);
opacity: 1;
filter: blur(0px);
}
50% {
transform: translateY(0) scale(1.05, 0.95);
opacity: 1;
filter: blur(0px);
}
65% {
transform: translateY(-12px) scale(0.98, 1.02);
opacity: 1;
filter: blur(0px);
}
80% {
transform: translateY(0) scale(1.02, 0.98);
opacity: 1;
filter: blur(0px);
}
100% {
transform: translateY(0) scale(1, 1);
opacity: 1;
filter: blur(0px);
}
}
/* CSS Animation Shorthand & Properties */
.animate-smoothBounce {
animation: smoothBounce 1.00s cubic-bezier(0.28, 0.84, 0.42, 1) infinite normal both;
transform-origin: center center;
}
/* Individual Longhand Properties */
.animate-smoothBounce-longhand {
animation-name: smoothBounce;
animation-duration: 1.00s;
animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: both;
transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
.animate-smoothBounce, .animate-smoothBounce-longhand {
animation: none;
}
}How to Use CSS Animation & Keyframes Studio
Choose a motion preset (Attention, Entrances, Exits, Micro-interactions) or build custom keyframes from scratch.
Tune animation properties: Duration, Start Delay, Easing function (including Spring and Apple iOS curves), Iterations, and Direction.
Test how motion behaves on real-world UI targets: CTA Button, Glass Card, Notification Badge, Brand Logo, or Geometric Box.
Use the Keyframe Timeline tab to inspect or insert steps (0% to 100%) and configure transforms, opacities, and blur filters.
Copy production-ready CSS @keyframes, arbitrary Tailwind CSS classes, tailwind.config.js theme extension, or React Framer Motion JSX.
Frequently Asked Questions
How do I add custom keyframe steps?
Switch to the 'Keyframe Timeline' tab and click 'Add Keyframe'. You can set any percentage between 0% and 100% and fine-tune translateY, scale, rotate, opacity, and blur filter values.
Can I use the output in Tailwind CSS?
Yes, the Export & Frameworks tab provides both ready-to-paste arbitrary classes and the complete theme.extend keyframes/animation block for your tailwind.config.js.
Does it support React Framer Motion?
Yes, we generate clean <motion.div> JSX code with mapped animate and transition properties ready for React and Next.js applications.
Can I test slow-motion or pause animations?
Yes, use the playback controls toolbar beneath the preview to play, pause, restart, or adjust playback speed to 0.25x (slow-mo), 0.5x, 1x, or 2x.
Related Developer Tools
Explore more free client-side developer utilities in this category