CSS Animation Generator

CSS Animation Example

CSS Animation Generator - Help Guide

Create custom CSS keyframe animations with live preview. Adjust controls to see animations in real-time, then copy the generated CSS code for use in your projects.

GETTING STARTED

1. Click any Animation Preset button to see a pre-configured animation
2. Click the Play Animation button to restart the animation
3. Adjust any control slider or dropdown to customize the effect
4. Click Copy Code to get the CSS for your website

• Fade In - Element fades from invisible to visible
• Slide In - Element slides in from the left
• Bounce - Element bounces up and down
• Rotate - Element rotates from 0-360 degrees
• Scale - Element grows and shrinks
• Pulse - Element gently pulses larger and smaller
• Fade Out - Element fades from visible to invisible
• Slide Out - Element slides off to the left
• Flip Back - Element flips backwards like a card

• Duration - How long the animation takes (0.1s to 5s)
• Delay - Wait time before animation starts (0s to 3s)
• Timing Function - The animation's acceleration curve (ease, linear, bounce, etc.)

• Iteration Count - How many times the animation repeats (once, 2 times, 3 times, or infinite)
• Direction - normal (forward), reverse (backward), alternate (forward then back)
• Fill Mode - What happens before/after animation:
  • None: Returns to normal immediately
  • Forwards: Stays in final animated state
  • Backwards: Instantly reverts to starting state after animation finishes
  • Both: Combines forwards and backwards - this was used on the example animation video, works great for the Flip preset as well

• Translate X - Move left/right (-200px to 200px)
• Translate Y - Move up/down (-200px to 200px)
• Rotate - Spin clockwise (0° to 360°)
• Rotate Y (Flip) - Flip on vertical axis (0° to 360°)
• Scale - Resize (0.1 to 2.0, where 1.0 is normal size)

• Opacity - Transparency (0 = invisible, 1 = fully visible)
• Border Radius - Rounded corners (0px to 50px)
• Animate Border Radius - Check this to include border radius in the animation (creates a morphing corner effect)

1. Click the Copy Code button
2. Paste into your CSS file
3. Add the class "animated-element" to any HTML element you want to animate
4. The animation will play automatically when the page loads unless you set a delay
5. If you don't want the animation to start when the page loads use the delay settings for up to a 3 second delay - if that's not long enough you can edit the delay time in the generated code when you paste it into your own file

• Use Fill Mode "both" for fade/slide in effects to see the full animation
• Use Fill Mode "forwards" for fade/slide out effects to keep the final state
• Combine multiple transforms (e.g. translate + rotate + scale) for complex effects
• Higher duration values (2+ seconds) work best for attention-grabbing effects and smoother animations
• Experimentation is the best way to learn!