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
Light Theme Dark Theme

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 Images Module Level 5

  • object-view-box

    Animation type: as basic-shape if possible otherwise discrete

CSS Fragmentation Module Level 4

  • orphans

    Animation type: by computed value type

  • widows

    Animation type: by computed value type

CSS Backgrounds and Borders Module Level 3

Filter Effects Module Level 2

  • backdrop-filter

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

CSS Shapes Module Level 2

CSS Containment Module Level 2

  • content-visibility

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

CSS Anchor Positioning Module Level 1

CSS Borders and Box Decorations 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 Animations Module Level 2

Compatibility Standard

CSS Images Module Level 3

CSS Box Model Module Level 4

CSS Conditional Rules Module Level 5

  • container

    Animation type: see individual properties

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

CSS Cascading and Inheritance Module Level 5

  • all

    Animation type: see individual properties

CSS Color HDR Module Level 1

CSS Form Control Styling Module Level 1

CSS Color Adjustment Module Level 1

CSS Gap Decorations Module Level 1

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 Lists and Counters Module Level 3

Pointer-driven Animations Module Level 1

CSS Backgrounds Module Level 4

CSS Masking Module Level 1

CSS Rhythmic Sizing Module Level 1

CSS Mobile Text Size Adjustment Module Level 1

CSS Scroll Snap Module Level 2

CSS Fonts Module Level 4

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 Fonts Module Level 5

  • font-size-adjust

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

Cascading Style Sheets (CSS) Level 2

  • z-index

    Animation type: by computed value type

CSS Positioned Layout Module Level 3

CSS Overflow Module Level 3

  • overflow-clip-margin

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

CSS Inline Layout Module Level 3

CSS Logical Properties and Values Module Level 1

CSS Text Module Level 3

Filter Effects 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 Basic User Interface Module Level 4

CSS Scrollbars Styling Module Level 1

CSS Positioned Layout Module Level 4

CSS Multi-column Layout Module Level 2

CSS Box Sizing Module Level 4

Motion Path Module Level 1

CSS Generated Content Module Level 3

CSS Grid Layout Module Level 3

CSS Overflow Module Level 4

CSS Transforms Module Level 1

CSS Display Module Level 4

  • display

    Animation type: see § 2.9 Animating and Interpolating display

  • order

    Animation type: by computed value type

  • reading-order

    Animation type: by computed value type

Scroll-driven Animations Module Level 1

CSS Ruby Annotation Layout Module Level 1

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

SVG Strokes

CSS Page Floats Module Level 3

  • float

    Animation type: by computed value type

  • float-offset

    Animation type: by computed value type

CSS Scroll Snap Module Level 1

CSS Color Module Level 4

  • color

    Animation type: by computed value type

  • opacity

    Animation type: by computed value type

CSS Text Decoration Module Level 3

CSS Speech Module Level 1

  • voice-volume

    Animation type: by computed value type

  • voice-balance

    Animation type: by computed value type

  • pause-before

    Animation type: by computed value type

  • pause-after

    Animation type: by computed value type

  • pause

    Animation type: see individual properties

  • rest-before

    Animation type: by computed value type

  • rest-after

    Animation type: by computed value type

  • rest

    Animation type: see individual properties

  • cue-before

    Animation type: by computed value type

  • cue-after

    Animation type: by computed value type

  • cue

    Animation type: see individual properties

  • voice-rate

    Animation type: by computed value type

  • voice-pitch

    Animation type: by computed value type

  • voice-range

    Animation type: by computed value type

  • voice-duration

    Animation type: by computed value type

MathML Core

CSS Writing Modes Module Level 4

CSS Table Module Level 3

CSS Text Decoration Module Level 4

CSS Text Module Level 4

CSS Fill and Stroke Module Level 3

CSS Shapes Module Level 1

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 Generated Content for Paged Media Module Level 4

CSS Fragmentation Module Level 4

CSS Backgrounds and Borders Module Level 3

CSS Anchor Positioning Module Level 1

CSS Borders and Box Decorations Module Level 4

CSS Box Alignment Module Level 3

Compatibility Standard

CSS Images Module Level 3

CSS Box Model Module Level 4

CSS Flexible Box Layout Module Level 1

CSS Form Control Styling Module Level 1

CSS Color Adjustment Module Level 1

CSS Gap Decorations Module Level 1

CSS Grid Layout Module Level 2

Compositing and Blending Module Level 2

CSS Lists and Counters Module Level 3

CSS Backgrounds Module Level 4

CSS Masking Module Level 1

CSS Linked Parameters Module Level 1

CSS Rhythmic Sizing Module Level 1

CSS Overscroll Behavior Module Level 1

CSS View Transitions Module Level 2

CSS Overflow Module Level 5

CSS Fonts Module Level 4

CSS Transforms Module Level 2

CSS Images Module Level 4

Cascading Style Sheets (CSS) Level 2

CSS Generated Content for Paged Media Module Level 3

CSS Positioned Layout Module Level 3

CSS Overflow Module Level 3

CSS Exclusions Module Level 1

CSS Inline Layout Module Level 3

CSS Text Module Level 3

Filter Effects Module Level 1

CSS Box Sizing Module Level 3

CSS Basic User Interface Module Level 4

CSS Scrollbars Styling Module Level 1

CSS Multi-column Layout Module Level 2

CSS Box Sizing Module Level 4

CSS Spatial Navigation Module Level 1

CSS Generated Content Module Level 3

CSS Grid Layout Module Level 3

CSS Overflow Module Level 4

CSS Round Display Module Level 1

CSS Transforms Module Level 1

CSS Line Grid Module Level 1

CSS Paged Media Module Level 3

CSS Display Module Level 4

CSS Ruby Annotation Layout Module Level 1

Scalable Vector Graphics (SVG) 2

CSS Regions Module Level 1

CSS Page Floats Module Level 3

CSS Scroll Snap Module Level 1

CSS Text Decoration Module Level 3

CSS Scroll Anchoring Module Level 1

CSS Speech Module Level 1

CSS Table Module Level 3

CSS Text Decoration Module Level 4

CSS Text Module Level 4

CSS Fill and Stroke Module Level 3

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.

CSS Containment Module Level 2

CSS Animations Module Level 1

CSS Animations Module Level 2

Compatibility Standard

CSS Conditional Rules Module Level 5

CSS Color Adjustment Module Level 1

Pointer-driven Animations Module Level 1

CSS Overflow Module Level 3

CSS Transitions Module Level 2

CSS Values and Units Module Level 5

CSS Viewport Module Level 1

CSS Transitions Module Level 1

CSS Display Module Level 4

Scroll-driven Animations Module Level 1

CSS Regions Module Level 1

CSS Writing Modes Module Level 4

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.

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 Box Alignment Module Level 3

CSS Fonts Module Level 4

Scalable Vector Graphics (SVG) 2

Created by: Vallek using W3C API, Node.js and Github Actions, 2023—2026

CSS Icon from Wiki under Creative Commons

⏫