CSS Tutorial

CSS Animatable

Last modified on: November 6, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8"><strong>CSS Animatable</strong> properties refer to the CSS properties that can be smoothly animated over time using CSS transitions or animations. Not all CSS properties can be animated due to how certain values impact the rendering and layout of a web page. Below is a breakdown of animatable properties, examples of common animations, and tips on optimizing animations for performance.</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="cc1b9780-a56f-468f-a9e4-b9b24e546f6f" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light"><hr />
<h3>1. <strong>Commonly Animatable Properties</strong></h3>
<p>CSS properties that can generally be animated include:</p>
<ul>
<li>
<p><strong>Transform properties</strong>:</p>
<ul>
<li><code>transform</code> (for translations, rotations, scaling)</li>
<li><code>scale</code>, <code>rotate</code>, <code>translate</code>, <code>skew</code></li>
</ul>
</li>
<li>
<p><strong>Opacity</strong>:</p>
<ul>
<li><code>opacity</code> (for fading effects)</li>
</ul>
</li>
<li>
<p><strong>Positioning</strong>:</p>
<ul>
<li><code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> (although using <code>transform</code> for position changes is more performance-friendly)</li>
</ul>
</li>
<li>
<p><strong>Size</strong>:</p>
<ul>
<li><code>width</code>, <code>height</code> (though these can trigger layout changes and are less performance-friendly)</li>
</ul>
</li>
<li>
<p><strong>Colors</strong>:</p>
<ul>
<li><code>color</code>, <code>background-color</code>, <code>border-color</code>, <code>text-shadow</code></li>
</ul>
</li>
<li>
<p><strong>Border properties</strong>:</p>
<ul>
<li><code>border-width</code>, <code>border-color</code>, <code>border-radius</code></li>
</ul>
</li>
</ul>
<hr />
<h3>2. <strong>CSS Transition and Animation Examples</strong></h3>
<h4>Using Transitions for Basic Animations</h4>
<p>CSS transitions are useful for simple animations that occur on state changes, such as when hovering over an element.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Basic hover animation */
.button {
    background-color: #3498db;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.button:hover {
    background-color: #2980b9;
    transform: scale(1.05);
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>Using Keyframe Animations for Complex Animations</h4>
<p>CSS keyframes allow for more complex animations by specifying multiple points in the animation&rsquo;s timeline.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.element {
    opacity: 0;
    animation: fadeIn 1s forwards;
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>3. <strong>Performance Tips for Animations</strong></h3>
<ul>
<li><strong>Use <code>transform</code> and <code>opacity</code></strong>: These properties can animate without triggering layout changes or reflows, making them efficient for smooth animations.</li>
<li><strong>Avoid animating <code>width</code> and <code>height</code></strong>: Changing dimensions can cause the browser to recalculate the layout (reflow), slowing down performance.</li>
<li><strong>Limit the use of <code>box-shadow</code> and <code>filter</code> animations</strong>: While animatable, they may cause the page to lag if used excessively.</li>
<li><strong>Consider using <code>will-change</code></strong>: This CSS property hints to the browser that an element will change, optimizing its rendering beforehand.</li>
</ul>
<hr />
<h3>Examples of CSS Animations</h3>
<h4>Scale Animation Example</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>/* Scaling animation on hover */
.scale-on-hover {
    transition: transform 0.3s ease;
}

.scale-on-hover:hover {
    transform: scale(1.1);
}
</code></pre>
</div>
</div>
</div>
</div>
<h4>Slide In Animation Example</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>@keyframes slideIn {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

.slide-in {
    animation: slideIn 0.5s ease-out;
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More