Animatable in CSS
In CSS, animatable properties are those that can be smoothly transitioned or animated from one value to another over time using transition or @keyframes.
? What Makes a Property Animatable?
A property is animatable if the browser can interpolate between its start and end values. This means:
The values must have a clear numerical or structured change (e.g., length, color, transform).
The browser must support interpolation logic for that property.
? Example: Transitioning an Animatable Property
.box { width: 100px; background-color: red; transition: width 0.5s ease, background-color 0.5s;}.box:hover { width: 200px; background-color: blue;}Both width and background-color are animatable, so they transition smoothly on hover.
? Common Animatable Properties
| Category | Properties |
|---|---|
| Layout | width, height, margin, padding, left, top, right, bottom |
| Transform | transform (e.g. scale, rotate, translate) |
| Color | color, background-color, border-color, fill, stroke |
| Text/Font | letter-spacing, word-spacing, line-height, text-indent |
| Box Model | border-width, border-spacing |
| Visual Effects | opacity, box-shadow, filter, clip-path |
? Non-Animatable Examples
display(e.g., fromnonetoblock)positionz-indexoverflowvisibility(but it can be used with opacity for workaround)
These can change abruptly, but not interpolated smoothly.
? Pro Tip:
Use @property (CSS Houdini) to make custom properties animatable if they represent valid animatable types (like <length>, <color>, etc.).
Would you like a code demo or list of all animatable properties?
