Visually create and fine-tune CSS Animations and Transitions. Experiment with
different easing functions, durations, and keyframes, then export the ready-to-use CSS code.
Try:
Properties to Animate
Transition Timing
duration 0.3s
delay 0s
Animation Timing
duration 1.5s
delay 0s
iteration-count
direction
fill-mode
Easing Function
custom cubic-bezier
cubic-bezier(0.25, 0.1, 0.25,
1)
Live Preview
▣
Keyframes
Generated CSS
Advertisement
Transition Mode
Pick properties, set their target values, choose duration/delay/easing. Click the
preview box to trigger the transition — it animates from the default state to your target values and back.
Animation Mode
Define keyframe stops at any percentage (0–100%). Each stop sets values for the active
properties. The preview loops continuously using @keyframes and animation.
Bezier Editor
Drag the orange handles on the graph to shape a custom cubic-bezier()
curve, or type exact X/Y values. The string updates live — click it to apply.
Properties
Toggle transform (translate, scale, rotate), opacity,
background-color, and border-radius. Only active properties appear in the
generated CSS.
Keyframe Stops
Add stops at any percentage. Each stop only needs values for properties you've
activated. Drag-free — type the percentage directly, stops auto-sort.
CSS Output
Copy CSS copies the full rule(s) — transition/animation property plus
@keyframes if in Animation mode. Copy @keyframes copies just the animation
definition.
Advertisement
How to use
Open the tool and enter your data or select options.
Adjust settings to see real-time updates.
Copy the generated result to your clipboard.
Frequently Asked Questions
What is the difference between a transition and
an animation?
Transitions require a trigger (like a hover state) to move from an initial state to a final state. Animations
use keyframes to run automatically and can have multiple steps.
What is an easing function?
An
easing function (or timing function) specifies the speed curve of an animation, such as linear, ease-in, or
custom cubic-bezier curves.
Can I create custom keyframes?
Yes,
you can define multiple keyframe steps (0%, 50%, 100%) and animate various properties across those steps.
Did you know?
CSS animations are often hardware-accelerated by the GPU, making them smoother than JavaScript-based
animations.
The cubic-bezier function uses four points to define a mathematical curve that dictates the animation's
timing.
You can animate the 'clip-path' property to create complex shape-morphing animations.