Understanding -sd-animation:</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">sd-fadeIn;</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">--sd-duration:</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">0ms;</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">--sd-easing:</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">ease-in;</span></h2><p><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">The</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">snippet</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">-sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;</code> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">looks</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">like</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">set</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">of</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">CSS</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">custom</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">properties</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">and</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">vendor-prefixed</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">(or</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">component-scoped)</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">property</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">used</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">to</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">control</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">an</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">element’s</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">entrance</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">animation.</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Below</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">is</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">focused</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">explanation,</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">practical</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">usage</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">examples,</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">and</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">tips</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">for</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">implementation.</span></p><h3 class="mt-6 mb-2 font-semibold text-xl" data-streamdown="heading-3"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">What</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">these</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">properties</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">mean</span></h3><ul class="list-inside list-disc whitespace-normal [li_&]:pl-6" data-streamdown="unordered-list"> <li class="py-1 [&>p]:inline" data-streamdown="list-item"> <p><span class="font-semibold" data-streamdown="strong"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">-sd-animation:</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">sd-fadeIn;</span></span><br> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Likely</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">custom</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">or</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">framework-specific</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">property</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">indicating</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">an</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">animation</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">name</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">or</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">preset.</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">The</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">-sd-</code> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">prefix</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">suggests</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">it’s</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">intended</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">for</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">specific</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">library,</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">component</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">scope,</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">or</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">internal</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">styling</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">system</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">rather</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">than</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">standard</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">CSS</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">property.</span></p> </li> <li class="py-1 [&>p]:inline" data-streamdown="list-item"> <p><span class="font-semibold" data-streamdown="strong"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">--sd-duration:</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">0ms;</span></span><br> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">A</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">CSS</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">custom</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">property</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">(variable)</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">defining</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">the</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">animation</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">duration.</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">0ms</code> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">means</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">the</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">animation</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">will</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">run</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">instantly</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">(no</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">visible</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">transition).</span></p> </li> <li class="py-1 [&>p]:inline" data-streamdown="list-item"> <p><span class="font-semibold" data-streamdown="strong"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">--sd-easing:</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">ease-in;</span></span><br> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Another</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">CSS</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">custom</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">property</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">specifying</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">the</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">timing</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">function</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">for</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">the</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">animation;</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">ease-in</code> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">accelerates</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">from</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">slow</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">to</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">fast</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">at</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">the</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">start.</span></p> </li> </ul><h3 class="mt-6 mb-2 font-semibold text-xl" data-streamdown="heading-3"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">When</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">you'd</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">use</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">this</span></h3><ul class="list-inside list-disc whitespace-normal [li_&]:pl-6" data-streamdown="unordered-list"> <li class="py-1 [&>p]:inline" data-streamdown="list-item"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">To</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">apply</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">predefined</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">animation</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">preset</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">from</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">design</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">system</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">or</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">component</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">library</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">that</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">reads</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">-sd-animation</code> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">and</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">uses</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">the</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">custom</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">properties</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">for</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">timing.</span></li> <li class="py-1 [&>p]:inline" data-streamdown="list-item"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">To</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">temporarily</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">disable</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">an</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">entrance</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">animation</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">by</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">setting</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">--sd-duration: 0ms</code> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">(useful</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">for</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">initial</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">render</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">performance</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">or</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">accessibility).</span></li> <li class="py-1 [&>p]:inline" data-streamdown="list-item"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">To</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">configure</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">animation</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">easing</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">separately</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">from</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">duration</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">so</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">single</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">animation</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">preset</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">can</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">be</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">reused</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">with</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">different</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">timings.</span></li> </ul><h3 class="mt-6 mb-2 font-semibold text-xl" data-streamdown="heading-3"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Example:</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Integrating</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">with</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">component</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">stylesheet</span></h3><p><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Assume</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">component</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">library</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">reads</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">these</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">properties</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">and</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">maps</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">them</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">to</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">actual</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">keyframes:</span></p><div class="my-4 flex w-full flex-col gap-2 rounded-xl border border-border bg-sidebar p-2" data-language="css" data-streamdown="code-block" style="content-visibility: auto; contain-intrinsic-size: auto 200px;"><div class="flex h-8 items-center text-muted-foreground text-xs" data-language="css" data-streamdown="code-block-header"><span class="ml-1 font-mono lowercase">css</span></div><div class="pointer-events-none sticky top-2 z-10 -mt-10 flex h-8 items-center justify-end"><div class="pointer-events-auto flex shrink-0 items-center gap-2 rounded-md border border-sidebar bg-sidebar/80 px-1.5 py-1 supports-[backdrop-filter]:bg-sidebar/70 supports-[backdrop-filter]:backdrop-blur" data-streamdown="code-block-actions"><button class="cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50" data-streamdown="code-block-download-button" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M8.375 0C8.72 0 9 .28 9 .625v9.366l2.933-2.933a.625.625 0 0 1 .884.884l-2.94 2.94c-.83.83-2.175.83-3.005 0l-2.939-2.94a.625.625 0 0 1 .884-.884L7.75 9.991V.625C7.75.28 8.03 0 8.375 0m-4.75 13.75a.625.625 0 1 0 0 1.25h9.75a.625.625 0 1 0 0-1.25z"></path></svg></button><button class="cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50" data-streamdown="code-block-copy-button" title="Copy Code" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M11.049 5c.648 0 1.267.273 1.705.751l1.64 1.79.035.041c.368.42.571.961.571 1.521v4.585A2.31 2.31 0 0 1 12.688 16H8.311A2.31 2.31 0 0 1 6 13.688V7.312A2.31 2.31 0 0 1 8.313 5zM9.938-.125c.834 0 1.552.496 1.877 1.208a4 4 0 0 1 3.155 3.42c.082.652-.777.968-1.22.484a2.75 2.75 0 0 0-1.806-2.57A2.06 2.06 0 0 1 9.937 4H6.063a2.06 2.06 0 0 1-2.007-1.584A2.75 2.75 0 0 0 2.25 5v7a2.75 2.75 0 0 0 2.66 2.748q.054.17.123.334c.167.392-.09.937-.514.889l-.144-.02A4 4 0 0 1 1 12V5c0-1.93 1.367-3.54 3.185-3.917A2.06 2.06 0 0 1 6.063-.125zM8.312 6.25c-.586 0-1.062.476-1.062 1.063v6.375c0 .586.476 1.062 1.063 1.062h4.374c.587 0 1.063-.476 1.063-1.062V9.25h-1.875a1.125 1.125 0 0 1-1.125-1.125V6.25zM12 8h1.118L12 6.778zM6.063 1.125a.813.813 0 0 0 0 1.625h3.875a.813.813 0 0 0 0-1.625z"></path></svg></button></div></div><div class="language-css overflow-hidden rounded-md border border-border bg-background p-4 text-sm" data-language="css" data-streamdown="code-block-body"><pre class="language-css bg-[var(--sdm-bg,inherit] dark:bg-[var(--shiki-dark-bg,var(--sdm-bg,inherit)]" style=""><code class="[counter-increment:line_0] [counter-reset:line]"><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #6E7781; --shiki-dark: #8B949E;">/Component base styles (library) */</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">:root</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> {</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #953800; --shiki-dark: #FFA657;">--sd-duration</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">: </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">300</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #CF222E; --shiki-dark: #FF7B72;">ms</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">;</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #953800; --shiki-dark: #FFA657;">--sd-easing</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">: </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">ease-out</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">;</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">}</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"> </span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">.my-component</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> {</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">animation-name</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">: </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">var</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">(</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #953800; --shiki-dark: #FFA657;">--sd-animation-name</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">, </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">none</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">);</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">animation-duration</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">: </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">var</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">(</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #953800; --shiki-dark: #FFA657;">--sd-duration</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">);</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">animation-timing-function</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">: </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">var</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">(</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #953800; --shiki-dark: #FFA657;">--sd-easing</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">);</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">}</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"> </span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #6E7781; --shiki-dark: #8B949E;">/* library maps -sd-animation values to keyframes */</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">:root</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> {</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #953800; --shiki-dark: #FFA657;">--sd-animation-sd-fadeIn</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">: sd-fadeIn;</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">}</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"> </span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #CF222E; --shiki-dark: #FF7B72;">@keyframes</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #953800; --shiki-dark: #FFA657;">sd-fadeIn</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> {</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">from</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> { </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">opacity</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">: </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">0</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">; </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">transform</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">: </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">translateY</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">(</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">8</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #CF222E; --shiki-dark: #FF7B72;">px</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">); }</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">to</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> { </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">opacity</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">: </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">1</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">; </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">transform</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">: </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">translateY</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">(</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">0</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">); }</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">}</span></span></code></pre></div></div><p><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">Then</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">consumer</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">can</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">override:</span></p><div class="my-4 flex w-full flex-col gap-2 rounded-xl border border-border bg-sidebar p-2" data-language="html" data-streamdown="code-block" style="content-visibility: auto; contain-intrinsic-size: auto 200px;"><div class="flex h-8 items-center text-muted-foreground text-xs" data-language="html" data-streamdown="code-block-header"><span class="ml-1 font-mono lowercase">html</span></div><div class="pointer-events-none sticky top-2 z-10 -mt-10 flex h-8 items-center justify-end"><div class="pointer-events-auto flex shrink-0 items-center gap-2 rounded-md border border-sidebar bg-sidebar/80 px-1.5 py-1 supports-[backdrop-filter]:bg-sidebar/70 supports-[backdrop-filter]:backdrop-blur" data-streamdown="code-block-actions"><button class="cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50" data-streamdown="code-block-download-button" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M8.375 0C8.72 0 9 .28 9 .625v9.366l2.933-2.933a.625.625 0 0 1 .884.884l-2.94 2.94c-.83.83-2.175.83-3.005 0l-2.939-2.94a.625.625 0 0 1 .884-.884L7.75 9.991V.625C7.75.28 8.03 0 8.375 0m-4.75 13.75a.625.625 0 1 0 0 1.25h9.75a.625.625 0 1 0 0-1.25z"></path></svg></button><button class="cursor-pointer p-1 text-muted-foreground transition-all hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50" data-streamdown="code-block-copy-button" title="Copy Code" type="button"><svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="14" height="14" color="currentColor"><path fill="currentColor" d="M11.049 5c.648 0 1.267.273 1.705.751l1.64 1.79.035.041c.368.42.571.961.571 1.521v4.585A2.31 2.31 0 0 1 12.688 16H8.311A2.31 2.31 0 0 1 6 13.688V7.312A2.31 2.31 0 0 1 8.313 5zM9.938-.125c.834 0 1.552.496 1.877 1.208a4 4 0 0 1 3.155 3.42c.082.652-.777.968-1.22.484a2.75 2.75 0 0 0-1.806-2.57A2.06 2.06 0 0 1 9.937 4H6.063a2.06 2.06 0 0 1-2.007-1.584A2.75 2.75 0 0 0 2.25 5v7a2.75 2.75 0 0 0 2.66 2.748q.054.17.123.334c.167.392-.09.937-.514.889l-.144-.02A4 4 0 0 1 1 12V5c0-1.93 1.367-3.54 3.185-3.917A2.06 2.06 0 0 1 6.063-.125zM8.312 6.25c-.586 0-1.062.476-1.062 1.063v6.375c0 .586.476 1.062 1.063 1.062h4.374c.587 0 1.063-.476 1.063-1.062V9.25h-1.875a1.125 1.125 0 0 1-1.125-1.125V6.25zM12 8h1.118L12 6.778zM6.063 1.125a.813.813 0 0 0 0 1.625h3.875a.813.813 0 0 0 0-1.625z"></path></svg></button></div></div><div class="language-html overflow-hidden rounded-md border border-border bg-background p-4 text-sm" data-language="html" data-streamdown="code-block-body"><pre class="language-html bg-[var(--sdm-bg,inherit] dark:bg-[var(--shiki-dark-bg,var(--sdm-bg,inherit)]" style="--sdm-bg: transparent; --sdm-fg: inherit;"><code class="[counter-increment:line_0] [counter-reset:line]"><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"><</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #116329; --shiki-dark: #7EE787;">div</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">class</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">=</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0A3069; --shiki-dark: #A5D6FF;">"my-component"</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> </span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0550AE; --shiki-dark: #79C0FF;">style</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">=</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #0A3069; --shiki-dark: #A5D6FF;">"-sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;"</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">></span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"> Instantly visible content (no fade)</span></span><span class="block before:content-[counter(line)] before:inline-block before:[counter-increment:line] before:w-6 before:mr-4 before:text-[13px] before:text-right before:text-muted-foreground/50 before:font-mono before:select-none"><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;"></</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #116329; --shiki-dark: #7EE787;">div</span><span class="text-[var(--sdm-c,inherit)] dark:text-[var(--shiki-dark,var(--sdm-c,inherit))]" style="--sdm-c: #1F2328; --shiki-dark: #E6EDF3;">></span></span></code></pre></div></div><h3 class="mt-6 mb-2 font-semibold text-xl" data-streamdown="heading-3"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Practical</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">tips</span></h3><ul class="list-inside list-disc whitespace-normal [li_&]:pl-6" data-streamdown="unordered-list"> <li class="py-1 [&>p]:inline" data-streamdown="list-item"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">If</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">you</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">want</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">the</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">fade-in</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">to</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">be</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">visible,</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">set</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">positive</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">duration</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">like</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">200ms</code> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">or</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">300ms</code><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">.</span></li> <li class="py-1 [&>p]:inline" data-streamdown="list-item"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Use</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">0ms</code> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">when</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">you</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">need</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">to</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">disable</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">transitions</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">for</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">accessibility,</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">testing,</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">or</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">SSR</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">hydration</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">flicker</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">prevention.</span></li> <li class="py-1 [&>p]:inline" data-streamdown="list-item"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Keep</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">easing</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">consistent</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">across</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">a</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">UI</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">to</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">maintain</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">visual</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">rhythm;</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">use</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">ease-out</code> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">for</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">entrance</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">animations</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">that</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">decelerate</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">smoothly.</span></li> </ul><h3 class="mt-6 mb-2 font-semibold text-xl" data-streamdown="heading-3"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">Accessibility</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">note</span></h3><p><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Instant</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">animations</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">(0ms)</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">reduce</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">motion</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">and</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">can</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">benefit</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">users</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">sensitive</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">to</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">motion.</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">Consider</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">respecting</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">prefers-reduced-motion</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">and</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">offering</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">controls</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">to</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">disable</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">non-essential</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">animations.</span></p><h3 class="mt-6 mb-2 font-semibold text-xl" data-streamdown="heading-3"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">Quick</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">variant</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 250ms; --sd-easing: ease-in;">examples</span></h3><ul class="list-inside list-disc whitespace-normal [li_&]:pl-6" data-streamdown="unordered-list"> <li class="py-1 [&>p]:inline" data-streamdown="list-item"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Smooth</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">fade-in:</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">-sd-animation: sd-fadeIn; --sd-duration: 300ms; --sd-easing: ease-out;</code></li> <li class="py-1 [&>p]:inline" data-streamdown="list-item"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Snappy</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">entrance:</span> <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-sm" data-streamdown="inline-code">-sd-animation: sd-fadeIn; --sd-duration: 120ms; --sd-easing: cubic-bezier(.2, .8, .2, 1);</code></li> <li class="py-1 [&>p]:inline" data-streamdown="list-item"><span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">Reduced</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">motion:</span> <span data-sd-animate="true" style="--sd-animation: sd-fadeIn; --sd-duration: 0ms; --sd-easing: ease-in;">-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: linear;
If you want, I can convert this into a short tutorial with live HTML/CSS examples or show how to respect prefers-reduced-motion in code.
Leave a Reply