Processing
Design custom keyframe animations visually. Select speed factors, configure repeat values, and tweak custom cubic-bezier timing curves.
.animated-element {
animation-name: bounce;
animation-duration: 1.5s;
animation-delay: 0s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: both;
animation-play-state: running;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}Design custom CSS keyframe animations visually. Select presets like bounce, pulse, spin, custom bezier paths, delays, timing functions, and copy ready-to-use CSS code.
CSS transitions animate property changes over time when triggered by hover, focus, or class changes. CSS Keyframes offer a complete step-by-step timeline of changes that can run automatically or loop infinitely without user interactions.
A cubic-bezier timing function defines a cubic bezier curve mathematically using four coordinates (X1, Y1, X2, Y2). Tweaking these coordinates lets you create physics-like motions (e.g. starting slow, speeding up, and bouncing past the target destination) that feel incredibly premium.