PocketPlay
中文

CSS Animation Generator

Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up

Preview

Hello

Keyframes

Effects

Timing

Easing

CSS


    

  




How to use the CSS animation generator
  1. Start from an effect preset, or click Add keyframe and place it at any percentage along the timeline.
  2. Select a keyframe and set its move, scale, rotate, skew, opacity and background; adjust duration, delay, repeat and easing on the right.
  3. Copy the generated @keyframes block plus the class and paste it straight into your stylesheet.
FAQ
How do I make a custom easing curve?
Choose Custom cubic-bezier and drag the two handles on the curve. The tool writes the exact cubic-bezier(x1, y1, x2, y2) values, including overshoot curves where a handle goes above 1.
Why does my animation not run on the page?
Check that the element has the generated class, that it is not display: none, and that animation-fill-mode is set — with both the element keeps the first keyframe before the delay and the last one after it finishes.
Can I animate colours and transforms together?
Yes. Tick Animate background colour and each keyframe will also carry a background-color, which the browser interpolates alongside the transform.


  


  

    
    

          
            
            
              CSS Gradient GeneratorHOT
              Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file.
            
          
          
            
            
              CSS Filter Generator
              Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule.
            
          
          
            
            
              Box Shadow Generator
              Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS.
            
          
          
            
            
              Border Radius Generator
              Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS.
            
          
          
            
            
              Color PickerHOT
              Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast.
            
          
          
            
            
              Color Converter
              Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly.
            
          
          
            
            
              CSS Grid Generator
              Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML.
            
          
          
            
            
              Flexbox Playground
              Try every flex container and item property on a live preview, then copy the CSS and HTML.
            
          
    

    
All tools →