Not all CSS properties are suited for animation. This is because some properties lack intermediate states, while others are too complex for smooth transitions (interpolation).
Animations work with numerical values that can gradually change. If a property lacks numerical values or its changes happen abruptly, it can’t be animated.
Here are key CSS properties that cannot be animated:
1. display
One of the most common non-animatable properties. Its values (e.g., block, none, flex) have no in-between states. For instance, transitioning from display: none to display: block is an instantaneous change that can’t be animated.
Alternatives: Use opacity or visibility to create the appearance/disappearance effect.
2. visibility
While you can toggle the visibility property (e.g., between visible and hidden), it can’t be smoothly animated because it lacks intermediate values.
Tip: Combine visibility with opacity and add a delay to create a smoother transition.
3. position
This property defines an element’s positioning on the page (static, relative, absolute, fixed, sticky), but transitions between these values happen instantly.
Alternatives: Animate related properties like top, left, right, bottom, or use transform for more complex movement.
4. float
Like position, the float property (left, right) changes immediately, without intermediate steps.
Alternative: Use transform: translateX () to animate floating elements.
5. z-index
Responsible for the stacking order of elements, z-index uses integer values, which cannot be interpolated, making it non-animatable.
6. background-image
You can’t animate background images directly. The image changes abruptly when the background-image property is altered.
Alternative: Use pseudo-elements (: before, : after) or opacity to overlay images and create smoother transitions.
7. clip-path with non-numeric values
Although clip-path supports animation, it only works when using numerical values. Complex shapes or images (e.g., circle (), polygon ()) can limit the smoothness of the animation.
Conclusion
When creating CSS animations, it’s crucial to remember that not all properties can be animated. This is often due to non-numeric values or abrupt changes that can’t be smoothly interpolated.
Understanding these limitations allows for creative workarounds. For instance, properties like opacity and transform can often achieve the desired effects.
When working with browser animations, it’s important to understand how rendering processes like reflow, repaint, and layout shifts affect performance and smoothness.
Reflow (или layout recalculation) occurs when the browser recalculates the size and position of elements on a page. This process is triggered when elements change in a way that affects their dimensions or the document structure.
Causes of reflow:
Reflow is resource-intensive because changes to one element can affect others, depending on its position or size.
Example:
const element = document.getElementById('box');
element.style.width = '200px'; // Causes reflow as the width of the element is changed
Repaint happens when an element’s visual appearance changes without affecting its size or layout. This involves updates to properties like color, shadow, or borders.
Repaint is less expensive than reflow, as it doesn’t require recalculating the entire document structure, just the visual changes.
Causes of repaint:
Example:
const element = document.getElementById('box');
element.style.backgroundColor = 'blue'; // Causes repaint as the background color changes
Layout Shift refers to unexpected movement of elements on a page after it has loaded. These shifts often occur due to dynamic content changes and negatively impact the user experience.
Cumulative Layout Shift (CLS) is a metric that measures the stability of a page’s layout. Pages with frequent shifts score higher, which is considered poor performance.
Causes of layout shift:
How to avoid layout shift:
Example:
When an image loads without predefined width and height, elements may shift as it appears, disrupting the layout.
<!-- Bad practice: image without dimensioning -->
<img src="example.jpg">1. Use transform and opacity for animations. Animations based on these properties don’t trigger reflow, as they don’t affect the image is already loaded (or starting to load). They only change the visual representation, which requires only repaint.
/* Smooth motion animation without reflow */
#box {
transition: transform 1s ease;
}
#box.move {
transform: translateX(300px);
}
2. Avoid changing element size or position directly. Animating properties like width, height, or margin can cause frequent reflows, slowing down the page.
3. Use will-change.If you know which properties will be animated, apply the will-change property to optimize rendering. However, overusing it can negatively affect performance
#box {
will-change: transform;
}
4. Batch DOM updates. Group multiple style changes or DOM manipulations into one update to reduce the number of reflows or repaints.
const box = document.getElementById('box');
box.style.width = '200px';
box.style.height = '200px';
// Change happens in a single reflow
Conclusion
When creating animations or dynamically updating elements, consider how these changes impact reflow, repaint, and layout shifts. Optimizing these processes ensures smoother animations and prevents performance bottlenecks. By using properties like transform and opacity and carefully managing DOM updates, you can minimize browser load and enhance page performance.