[{"data":1,"prerenderedAt":70},["ShallowReactive",2],{"tool-content-en-css-animation-generator":3},{"id":4,"title":5,"body":6,"description":61,"extension":62,"locale":63,"meta":64,"navigation":65,"path":66,"seo":67,"stem":68,"toolId":12,"__hash__":69},"tools\u002Ftools\u002Fen\u002Fcss-animation-generator.md","CSS Animation Generator",{"type":7,"value":8,"toc":56},"minimark",[9,13,22],[10,11,5],"h2",{"id":12},"css-animation-generator",[14,15,16,17,21],"p",{},"Build CSS animations visually and copy or download ready-to-use ",[18,19,20],"code",{},"@keyframes",".",[23,24,25,37,40,43,46],"ul",{},[26,27,28,29,36],"li",{},"Pick an animation from a grouped dropdown: six adjustable basics (fade, slide, scale, rotate, bounce, shake) plus about 90 one-shot presets — flash, pulse, rubber band, shakes, swings, back and light-speed entrances, fade\u002Fslide\u002Fzoom\u002Frotate\u002Froll families, hinge, and more — sourced from the ",[30,31,35],"a",{"href":32,"rel":33},"https:\u002F\u002Fanimate.style\u002F",[34],"nofollow","animate.css"," project (MIT licensed).",[26,38,39],{},"Tune the shared timing (duration, delay, loop, direction, fill mode). The six basic effects also expose their own parameters such as slide distance, start scale, rotate angles, bounce height, or shake amplitude.",[26,41,42],{},"The easing editor draws the timing curve: choose a keyword or Material preset, or drag the two cubic-bezier handles for a fully custom curve.",[26,44,45],{},"A live preview runs the animation as you tweak it. The preview area plays motion even when your system asks for reduced motion, because it exists to review the motion you are building; the rest of the page still respects your preference.",[26,47,48,49,51,52,55],{},"The export panel shows the generated ",[18,50,20],{}," and a usage class. Copy it, or download it as a ",[18,53,54],{},".css"," file. Everything runs locally in your browser.",{"title":57,"searchDepth":58,"depth":58,"links":59},"",2,[60],{"id":12,"depth":58,"text":5},"Design CSS animations from a large preset library with an editable easing curve and export clean @keyframes.","md","en",{},true,"\u002Ftools\u002Fen\u002Fcss-animation-generator",{"title":5,"description":61},"tools\u002Fen\u002Fcss-animation-generator","z0OhPD-tq9AHKo5qd-xqzDJGTQ0xTNkimAxz-Y2SCtA",1792391416882]