Animatable and not animatable CSS properties

This page contains lists of animatable and not animatable CSS properties. There was a list like this on MDN but it was removed (see discussion here), so I decided to make one) I'd like to thank @yarusome and @Josh-Cena for replying and providing a link to the W3C api.

This page is not affiliated with W3C or MDN. However it uses W3C open API to get all the data from specifications.

Some values may differ between W3C api and any other sources (including MDN and specs themselves). There are also multiple Levels of same specs where same properties also may differ. Always check different sources and test it yourself!

The point of this page is to be fully automated without need for manual edits. It updates once a day. If you don't see any properties (this means build failed) or if you found any other problem please create an issue on github.

created by: Vallek

Syntax, how to use:

Spec Title - name of W3C spec where property belongs

Contents

  1. Animatable CSS properties
  2. Not fully animatable CSS properties
  3. Not animatable CSS properties
  4. Other cases

Animatable CSS properties

This is a list of properties that can have actual gradual transition from one state to another.

If it says "see §" as animation type value just click on property link. You will find an anchor link to the specific part of spec there.

If it says "see individual properties" you can find them close to the shorthand or once again in specs following property link. Some of those could actually be not fully animatable.

CSS Anchor Positioning

Compatibility Standard

CSS Shapes Module Level 2

CSS Generated Content Module Level 3

CSS Display Module Level 4

  • display

    Animation type: see § 2.9 Animating and Interpolating display

  • order

    Animation type: by computed value type

CSS Grid Layout Module Level 3

CSS Color HDR Module Level 1

CSS Fonts Module Level 5

  • font-size-adjust

    Animation type: discrete if the keywords differ otherwise by computed value type

CSS Transforms Module Level 1

CSS Scroll Snap Module Level 2

CSS Basic User Interface Module Level 4

CSS Shapes Module Level 1

CSS Rhythmic Sizing

CSS Backgrounds and Borders Module Level 3

CSS Positioned Layout Module Level 3

CSS Ruby Annotation Layout Module Level 1

CSS Multi-column Layout Module Level 1

CSS Box Sizing Module Level 3

  • width

    Animation type: by computed value type recursing into fit-content()

  • height

    Animation type: by computed value type recursing into fit-content()

  • min-width

    Animation type: by computed value recursing into fit-content()

  • min-height

    Animation type: by computed value recursing into fit-content()

  • max-width

    Animation type: by computed value recursing into fit-content()

  • max-height

    Animation type: by computed value recursing into fit-content()

  • column-width

    Animation type: by computed value type

CSS Fonts Module Level 4

Filter Effects Module Level 1

CSS Text Module Level 4

CSS Box Model Module Level 4

CSS Writing Modes Level 4

Scalable Vector Graphics (SVG) 2

  • cx

    Animation type: by computed value

  • cy

    Animation type: by computed value

  • r

    Animation type: by computed value

  • rx

    Animation type: by computed value

  • x

    Animation type: by computed value

  • y

    Animation type: by computed value

  • d

    Animation type: See prose

  • shape-subtract

    Animation type: See Interpolation of Basic Shapes

  • fill

    Animation type: by computed value

  • stroke

    Animation type: by computed value

CSS Overflow Module Level 3

  • overflow-clip-margin

    Animation type: per computed value if the visual-box values match; otherwise discrete

CSS Color Module Level 4

  • color

    Animation type: by computed value type

  • opacity

    Animation type: by computed value type

CSS Images Module Level 5

CSS Borders and Box Decorations Module Level 4

CSS Mobile Text Size Adjustment Module Level 1

CSS Text Module Level 3

Motion Path Module Level 1

CSS Overflow Module Level 4

CSS Box Alignment Module Level 3

  • row-gap

    Animation type: by computed value type

  • column-gap

    Animation type: by computed value type

  • gap

    Animation type: by computed value type

CSS Grid Layout Module Level 2

  • grid-template-columns

    Animation type: if the list lengths match by computed value type per item in the computed track list (see § 7.2.5 Computed Value of a Track Listing and § 7.2.3.3 Interpolation/Combination of repeat()); discrete otherwise

  • grid-template-rows

    Animation type: if the list lengths match by computed value type per item in the computed track list (see § 7.2.5 Computed Value of a Track Listing and § 7.2.3.3 Interpolation/Combination of repeat()); discrete otherwise

  • grid-template

    Animation type: see individual properties

  • grid-auto-columns

    Animation type: if the list lengths match by computed value type per item; discrete otherwise

  • grid-auto-rows

    Animation type: if the list lengths match by computed value type per item; discrete otherwise

  • grid

    Animation type: see individual properties

CSS Containment Module Level 3

  • container

    Animation type: see individual properties

  • content-visibility

    Animation type: see § 8.1 Animating and Interpolating content-visibility

CSS Flexible Box Layout Module Level 1

  • flex-flow

    Animation type: see individual properties

  • flex

    Animation type: by computed value type

  • flex-grow

    Animation type: by computed value type

  • flex-shrink

    Animation type: number

  • flex-basis

    Animation type: by computed value type

Filter Effects Module Level 2

  • backdrop-filter

    Animation type: see prose in Filter Effects 1 § 14. Animation of Filters.

Scroll-driven Animations

CSS Logical Properties and Values Level 1

CSS Backgrounds Module Level 4

CSS Inline Layout Module Level 3

CSS Color Adjustment Module Level 1

CSS Fill and Stroke Module Level 3

CSS Text Decoration Module Level 4

CSS Positioned Layout Module Level 4

  • overlay

    Animation type: (see prose)

SVG Strokes

CSS Scrollbars Styling Module Level 1

CSS Transforms Module Level 2

  • translate

    Animation type: by computed value but see below for none

  • rotate

    Animation type: as SLERP but see below for none

  • scale

    Animation type: by computed value but see below for none

  • perspective

    Animation type: by computed value

  • perspective-origin

    Animation type: by computed value

CSS Lists and Counters Module Level 3

CSS Text Decoration Module Level 3

CSS Fragmentation Module Level 4

  • orphans

    Animation type: by computed value type

  • widows

    Animation type: by computed value type

CSS Table Module Level 3

CSS Cascading and Inheritance Level 5

  • all

    Animation type: see individual properties

CSS Page Floats

  • float

    Animation type: by computed value type

  • float-offset

    Animation type: by computed value type

CSS Images Module Level 3

CSS Scroll Snap Module Level 1

CSS Masking Module Level 1

  • clip-path

    Animation type: by computed value

  • mask-position

    Animation type: repeatable list

  • mask-size

    Animation type: repeatable list

  • mask

    Animation type: see individual properties

  • mask-border

    Animation type: See individual properties

  • clip

    Animation type: by computed value

CSS Box Sizing Module Level 4

Not Fully Animatable CSS properties

This is a list of properties with discrete animation type. They are technically animatable but have no real transition and go from start to end with swap at 50%.

CSS Anchor Positioning

Compatibility Standard

CSS Generated Content Module Level 3

CSS Generated Content for Paged Media Module Level 4

CSS Display Module Level 4

CSS Grid Layout Module Level 3

CSS Images Module Level 4

CSS Linked Parameters

CSS Overscroll Behavior Module Level 1

CSS Transforms Module Level 1

CSS Line Grid Module Level 1

CSS Regions Module Level 1

CSS Basic User Interface Module Level 4

CSS Rhythmic Sizing

CSS Backgrounds and Borders Module Level 3

CSS Positioned Layout Module Level 3

CSS Ruby Annotation Layout Module Level 1

CSS Multi-column Layout Module Level 1

CSS Multi-column Layout Module Level 2

CSS Box Sizing Module Level 3

CSS Fonts Module Level 4

Filter Effects Module Level 1

CSS Text Module Level 4

CSS Box Model Module Level 4

CSS View Transitions Module Level 1

Scalable Vector Graphics (SVG) 2

CSS Overflow Module Level 3

CSS Borders and Box Decorations Module Level 4

CSS Text Module Level 3

CSS Overflow Module Level 4

CSS Box Alignment Module Level 3

CSS View Transitions Module Level 2

CSS Grid Layout Module Level 2

CSS Flexible Box Layout Module Level 1

CSS Generated Content for Paged Media Module

CSS Inline Layout Module Level 3

CSS Color Adjustment Module Level 1

CSS Fill and Stroke Module Level 3

CSS Text Decoration Module Level 4

CSS Scroll Anchoring Module Level 1

CSS Scrollbars Styling Module Level 1

CSS Transforms Module Level 2

CSS Lists and Counters Module Level 3

CSS Spatial Navigation Level 1

CSS Text Decoration Module Level 3

CSS Fragmentation Module Level 4

CSS Round Display Level 1

CSS Table Module Level 3

CSS Paged Media Module Level 3

CSS Page Floats

CSS Images Module Level 3

CSS Scroll Snap Module Level 1

CSS Masking Module Level 1

CSS Box Sizing Module Level 4

Not animatable CSS properties

You can see a lot of animation/transition properties here. That's because they animate others but can't be animated themselves.

Compatibility Standard

CSS Display Module Level 4

CSS Animations Level 2

CSS Scroll Snap Module Level 2

CSS Regions Module Level 1

MathML Core

CSS Animations Level 1

CSS Writing Modes Level 4

CSS Overflow Module Level 3

CSS Transitions Level 2

Compositing and Blending Level 2

CSS Transitions Level 1

CSS Containment Module Level 3

Scroll-driven Animations

CSS Color Adjustment Module Level 1

CSS Viewport Module Level 1

CSS Containment Module Level 2

CSS Will Change Module Level 1

Other cases

This is a list of everything else from api that didn't fit main lists. It happens if there is no animation type so api returns undefined. For example z-index. It has no animation type in specs. But in reality it's discrete (also calledan integer on MDN).

There are also some other properties that are duplicates from different specs or with -webkit prefix that already are in main lists. They are filtered out automatically. If you noticed something is missing please create an issue on github.

CSS Fonts Module Level 4

CSS 2

CSS Speech Module Level 1

Scalable Vector Graphics (SVG) 2

CSS Box Alignment Module Level 3

CSS Containment Module Level 3

CSS Exclusions Module Level 1

Created by: Vallek using W3C API, Node.js and Github Actions, 2024

CSS Icon from Wiki under Creative Commons

⏫