[{"data":1,"prerenderedAt":644},["ShallowReactive",2],{"guide-css-animation-tools":3},{"id":4,"title":5,"body":6,"date":636,"description":637,"extension":638,"meta":639,"navigation":179,"path":640,"readingTime":183,"seo":641,"stem":642,"__hash__":643},"guides\u002Fguides\u002Fcss-animation-tools.md","CSS Animation Tools",{"type":7,"value":8,"toc":621},"minimark",[9,14,23,34,38,110,114,123,229,232,236,241,345,348,352,357,384,388,395,399,402,465,469,472,495,498,502,569,573,576,599,603,617],[10,11,13],"h2",{"id":12},"css-animations-start-with-transforms","CSS Animations Start with Transforms",[15,16,17,18,22],"p",{},"Every CSS animation relies on one fundamental building block: the ",[19,20,21],"code",{},"transform"," property. Transforms let you rotate, scale, translate, and skew elements without affecting the document flow.",[15,24,25,26,29,30,33],{},"When you combine a transform with a ",[19,27,28],{},"transition"," or ",[19,31,32],{},"@keyframes"," animation, you get smooth, GPU-accelerated motion that performs well across devices.",[10,35,37],{"id":36},"the-animation-stack","The Animation Stack",[39,40,41,57],"table",{},[42,43,44],"thead",{},[45,46,47,51,54],"tr",{},[48,49,50],"th",{},"Layer",[48,52,53],{},"Property",[48,55,56],{},"Purpose",[58,59,60,73,85,97],"tbody",{},[45,61,62,66,70],{},[63,64,65],"td",{},"Foundation",[63,67,68],{},[19,69,21],{},[63,71,72],{},"Define what moves (rotate, scale, translate, skew)",[45,74,75,78,82],{},[63,76,77],{},"Timing",[63,79,80],{},[19,81,28],{},[63,83,84],{},"Smooth change on state change (hover, focus)",[45,86,87,90,94],{},[63,88,89],{},"Sequence",[63,91,92],{},[19,93,32],{},[63,95,96],{},"Multi-step animation sequences",[45,98,99,102,107],{},[63,100,101],{},"Control",[63,103,104],{},[19,105,106],{},"animation",[63,108,109],{},"Duration, delay, iteration, direction, fill",[10,111,113],{"id":112},"transform-transition-simple-animation","Transform + Transition = Simple Animation",[15,115,116,117,119,120,122],{},"The simplest CSS animation pairs a ",[19,118,21],{}," with a ",[19,121,28],{},":",[124,125,130],"pre",{"className":126,"code":127,"language":128,"meta":129,"style":129},"language-css shiki shiki-themes github-light github-dark",".card {\n  transition: transform 0.3s ease;\n}\n\n.card:hover {\n  transform: scale(1.05) translateY(-4px);\n}\n","css","",[19,131,132,145,168,174,181,189,224],{"__ignoreMap":129},[133,134,137,141],"span",{"class":135,"line":136},"line",1,[133,138,140],{"class":139},"sScJk",".card",[133,142,144],{"class":143},"sVt8B"," {\n",[133,146,148,152,155,158,162,165],{"class":135,"line":147},2,[133,149,151],{"class":150},"sj4cs","  transition",[133,153,154],{"class":143},": transform ",[133,156,157],{"class":150},"0.3",[133,159,161],{"class":160},"szBVR","s",[133,163,164],{"class":150}," ease",[133,166,167],{"class":143},";\n",[133,169,171],{"class":135,"line":170},3,[133,172,173],{"class":143},"}\n",[133,175,177],{"class":135,"line":176},4,[133,178,180],{"emptyLinePlaceholder":179},true,"\n",[133,182,184,187],{"class":135,"line":183},5,[133,185,186],{"class":139},".card:hover",[133,188,144],{"class":143},[133,190,192,195,198,201,204,207,210,213,215,218,221],{"class":135,"line":191},6,[133,193,194],{"class":150},"  transform",[133,196,197],{"class":143},": ",[133,199,200],{"class":150},"scale",[133,202,203],{"class":143},"(",[133,205,206],{"class":150},"1.05",[133,208,209],{"class":143},") ",[133,211,212],{"class":150},"translateY",[133,214,203],{"class":143},[133,216,217],{"class":150},"-4",[133,219,220],{"class":160},"px",[133,222,223],{"class":143},");\n",[133,225,227],{"class":135,"line":226},7,[133,228,173],{"class":143},[15,230,231],{},"This pattern handles most hover effects, button interactions, and micro-animations.",[10,233,235],{"id":234},"keyframes-for-complex-sequences","Keyframes for Complex Sequences",[15,237,238,239,122],{},"When you need multiple steps or continuous animation, use ",[19,240,32],{},[124,242,244],{"className":126,"code":243,"language":128,"meta":129,"style":129},"@keyframes pulse {\n  0%, 100% { transform: scale(1); }\n  50% { transform: scale(1.08); }\n}\n\n.element {\n  animation: pulse 2s ease-in-out infinite;\n}\n",[19,245,246,256,284,304,308,312,319,340],{"__ignoreMap":129},[133,247,248,250,254],{"class":135,"line":136},[133,249,32],{"class":160},[133,251,253],{"class":252},"s4XuR"," pulse",[133,255,144],{"class":143},[133,257,258,261,264,267,270,272,274,276,278,281],{"class":135,"line":147},[133,259,260],{"class":139},"  0%",[133,262,263],{"class":143},", ",[133,265,266],{"class":139},"100%",[133,268,269],{"class":143}," { ",[133,271,21],{"class":150},[133,273,197],{"class":143},[133,275,200],{"class":150},[133,277,203],{"class":143},[133,279,280],{"class":150},"1",[133,282,283],{"class":143},"); }\n",[133,285,286,289,291,293,295,297,299,302],{"class":135,"line":170},[133,287,288],{"class":139},"  50%",[133,290,269],{"class":143},[133,292,21],{"class":150},[133,294,197],{"class":143},[133,296,200],{"class":150},[133,298,203],{"class":143},[133,300,301],{"class":150},"1.08",[133,303,283],{"class":143},[133,305,306],{"class":135,"line":176},[133,307,173],{"class":143},[133,309,310],{"class":135,"line":183},[133,311,180],{"emptyLinePlaceholder":179},[133,313,314,317],{"class":135,"line":191},[133,315,316],{"class":139},".element",[133,318,144],{"class":143},[133,320,321,324,327,330,332,335,338],{"class":135,"line":226},[133,322,323],{"class":150},"  animation",[133,325,326],{"class":143},": pulse ",[133,328,329],{"class":150},"2",[133,331,161],{"class":160},[133,333,334],{"class":150}," ease-in-out",[133,336,337],{"class":150}," infinite",[133,339,167],{"class":143},[133,341,343],{"class":135,"line":342},8,[133,344,173],{"class":143},[15,346,347],{},"Keyframes give you precise control over timing, intermediate states, and looping behavior.",[10,349,351],{"id":350},"performance-tips","Performance Tips",[353,354,356],"h3",{"id":355},"use-transform-and-opacity","Use Transform and Opacity",[15,358,359,360,362,363,366,367,263,370,263,373,263,376,379,380,383],{},"Only ",[19,361,21],{}," and ",[19,364,365],{},"opacity"," are cheap to animate. They avoid layout recalculation and paint. Avoid animating ",[19,368,369],{},"width",[19,371,372],{},"height",[19,374,375],{},"top",[19,377,378],{},"left",", or ",[19,381,382],{},"margin",".",[353,385,387],{"id":386},"will-change-tells-the-browser-to-prepare","will-change Tells the Browser to Prepare",[15,389,390,391,394],{},"For animations that start after a delay, add ",[19,392,393],{},"will-change: transform"," to hint the browser to create a compositing layer early. Remove it after the animation ends to free memory.",[353,396,398],{"id":397},"reduce-motion-for-accessibility","Reduce Motion for Accessibility",[15,400,401],{},"Always respect the user's motion preferences:",[124,403,405],{"className":126,"code":404,"language":128,"meta":129,"style":129},"@media (prefers-reduced-motion: reduce) {\n  * {\n    animation-duration: 0.01ms !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n",[19,406,407,415,423,441,456,461],{"__ignoreMap":129},[133,408,409,412],{"class":135,"line":136},[133,410,411],{"class":160},"@media",[133,413,414],{"class":143}," (prefers-reduced-motion: reduce) {\n",[133,416,417,421],{"class":135,"line":147},[133,418,420],{"class":419},"s9eBZ","  *",[133,422,144],{"class":143},[133,424,425,428,430,433,436,439],{"class":135,"line":170},[133,426,427],{"class":150},"    animation-duration",[133,429,197],{"class":143},[133,431,432],{"class":150},"0.01",[133,434,435],{"class":160},"ms",[133,437,438],{"class":160}," !important",[133,440,167],{"class":143},[133,442,443,446,448,450,452,454],{"class":135,"line":176},[133,444,445],{"class":150},"    transition-duration",[133,447,197],{"class":143},[133,449,432],{"class":150},[133,451,435],{"class":160},[133,453,438],{"class":160},[133,455,167],{"class":143},[133,457,458],{"class":135,"line":183},[133,459,460],{"class":143},"  }\n",[133,462,463],{"class":135,"line":191},[133,464,173],{"class":143},[10,466,468],{"id":467},"css-animation-generators","CSS Animation Generators",[15,470,471],{},"Writing animation keyframes by hand is tedious. Online generators help you:",[473,474,475,483,489],"ul",{},[476,477,478,482],"li",{},[479,480,481],"strong",{},"CSS Transform Generator"," — Visually set rotate, scale, translate, skew, and 3D transforms, then copy the CSS",[476,484,485,488],{},[479,486,487],{},"Gradient Generator"," — Build animated gradient backgrounds",[476,490,491,494],{},[479,492,493],{},"Box Shadow Generator"," — Create layered shadow effects with transitions",[15,496,497],{},"These tools output production-ready CSS without manual calculation.",[10,499,501],{"id":500},"common-animation-patterns","Common Animation Patterns",[39,503,504,514],{},[42,505,506],{},[45,507,508,511],{},[48,509,510],{},"Pattern",[48,512,513],{},"CSS Approach",[58,515,516,527,537,547,558],{},[45,517,518,521],{},[63,519,520],{},"Hover lift",[63,522,523,526],{},[19,524,525],{},"transform: translateY(-4px)"," + transition",[45,528,529,532],{},[63,530,531],{},"Pulse",[63,533,534,536],{},[19,535,32],{}," scaling between 1 and 1.08",[45,538,539,542],{},[63,540,541],{},"Spin",[63,543,544,546],{},[19,545,32],{}," rotating from 0deg to 360deg",[45,548,549,552],{},[63,550,551],{},"Fade in",[63,553,554,555,557],{},"Transition ",[19,556,365],{}," from 0 to 1",[45,559,560,563],{},[63,561,562],{},"Slide in",[63,564,554,565,568],{},[19,566,567],{},"transform: translateX()"," from off-screen",[10,570,572],{"id":571},"try-it-yourself","Try It Yourself",[15,574,575],{},"Use the CSS Transform Generator to build transform values visually and copy the CSS code for your animations.",[473,577,578,585,592],{},[476,579,580,584],{},[581,582,481],"a",{"href":583},"\u002Ftools\u002Fcss-transform"," — Build transforms visually",[476,586,587,591],{},[581,588,590],{"href":589},"\u002Ftools\u002Fcss-gradient","CSS Gradient Generator"," — Create gradient backgrounds",[476,593,594,598],{},[581,595,597],{"href":596},"\u002Ftools\u002Fcss-box-shadow","CSS Box Shadow Generator"," — Design shadow effects",[10,600,602],{"id":601},"related-guides","Related Guides",[473,604,605,611],{},[476,606,607],{},[581,608,610],{"href":609},"\u002Fguides\u002Fcss-transform-guide","CSS Transform Guide",[476,612,613],{},[581,614,616],{"href":615},"\u002Fguides\u002Fcss-visual-effects","CSS Visual Effects",[618,619,620],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":129,"searchDepth":147,"depth":147,"links":622},[623,624,625,626,627,632,633,634,635],{"id":12,"depth":147,"text":13},{"id":36,"depth":147,"text":37},{"id":112,"depth":147,"text":113},{"id":234,"depth":147,"text":235},{"id":350,"depth":147,"text":351,"children":628},[629,630,631],{"id":355,"depth":170,"text":356},{"id":386,"depth":170,"text":387},{"id":397,"depth":170,"text":398},{"id":467,"depth":147,"text":468},{"id":500,"depth":147,"text":501},{"id":571,"depth":147,"text":572},{"id":601,"depth":147,"text":602},"2026-05-28","Essential CSS tools for creating smooth animations — transforms, transitions, keyframes, and generators that save time.","md",{"immutable":179},"\u002Fguides\u002Fcss-animation-tools",{"title":5,"description":637},"guides\u002Fcss-animation-tools","8ebNeEmbx73mIOAI87NXZVgIC2U3REUqwJKOOT2u8HQ",1780401330505]