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 Color HDR Module Level 1

CSS Box Model Module Level 4

CSS Gap Decorations Module Level 1

CSS Backgrounds and Borders Module Level 3

CSS Fragmentation Module Level 4

  • orphans

    Animation type: by computed value type

  • widows

    Animation type: by computed value type

CSS Color Adjustment Module Level 1

CSS Anchor Positioning Module Level 1

CSS Lists and Counters Module Level 3

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 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

CSS Form Control Styling 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 Images Module Level 3

CSS Conditional Rules Module Level 5

  • container

    Animation type: see individual properties

CSS Borders and Box Decorations Module Level 4

CSS Fonts Module Level 5

  • font-size-adjust

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

CSS Overflow Module Level 3

  • overflow-clip-margin

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

CSS Backgrounds Module Level 4

CSS Positioned Layout Module Level 3

CSS Positioned Layout Module Level 4

CSS Generated Content Module Level 3

CSS Inline Layout Module Level 3

CSS Masking Module Level 1

CSS Rhythmic Sizing Module Level 1

CSS Scroll Snap Module Level 2

CSS Scrollbars Styling Module Level 1

CSS Overflow Module Level 4

CSS Containment Module Level 2

  • content-visibility

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

CSS Scroll Snap Module Level 1

CSS Text Module Level 4

CSS Box Sizing Module Level 4

CSS Grid Layout Module Level 3

CSS Ruby Annotation Layout Module Level 1

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

CSS Mobile Text Size Adjustment Module Level 1

Pointer-driven Animations 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 Text Decoration Module Level 4

Filter Effects Module Level 2

  • backdrop-filter

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

CSS Text Module Level 3

CSS Text Decoration Module Level 3

Animation Triggers

CSS Fill and Stroke Module Level 3

SVG Strokes

CSS Multi-column Layout Module Level 2

CSS Images Module Level 5

  • object-view-box

    Animation type: as basic-shape if possible otherwise discrete

Cascading Style Sheets (CSS) Level 2

  • z-index

    Animation type: by computed value type

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

Filter Effects Module Level 1

MathML Core

CSS Shapes Module Level 1

CSS Fonts Module Level 4

CSS Color Module Level 4

  • color

    Animation type: by computed value type

  • opacity

    Animation type: by computed value type

CSS Table Module Level 3

CSS Transforms Module Level 1

Compatibility Standard

Motion Path 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 Writing Modes Module Level 4

CSS Page Floats Module Level 3

  • float

    Animation type: by computed value type

  • float-offset

    Animation type: by computed value type

Scroll-driven Animations Module Level 1

CSS Shapes Module Level 2

CSS Logical Properties and Values Module Level 1

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

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 3

CSS Box Model Module Level 4

CSS Gap Decorations Module Level 1

CSS Backgrounds and Borders Module Level 3

CSS Fragmentation Module Level 4

CSS Color Adjustment Module Level 1

CSS Anchor Positioning Module Level 1

CSS Lists and Counters Module Level 3

CSS Images Module Level 4

CSS Box Alignment Module Level 3

CSS Display Module Level 4

CSS Form Control Styling Module Level 1

CSS Grid Layout Module Level 2

CSS Images Module Level 3

CSS Overscroll Behavior Module Level 1

CSS Borders and Box Decorations Module Level 4

CSS Overflow Module Level 3

CSS Overflow Module Level 5

CSS Backgrounds Module Level 4

CSS Positioned Layout Module Level 3

CSS Paged Media Module Level 3

CSS Generated Content Module Level 3

CSS Inline Layout Module Level 3

CSS Masking Module Level 1

CSS Spatial Navigation Module Level 1

CSS Rhythmic Sizing Module Level 1

CSS Round Display Module Level 1

CSS Scroll Anchoring Module Level 1

CSS Line Grid Module Level 1

CSS Scrollbars Styling Module Level 1

CSS Overflow Module Level 4

CSS Scroll Snap Module Level 1

CSS Text Module Level 4

CSS Box Sizing Module Level 4

CSS Ruby Annotation Layout Module Level 1

CSS Speech Module Level 1

CSS Transforms Module Level 2

CSS Text Decoration Module Level 4

CSS Text Module Level 3

CSS Regions Module Level 1

CSS Text Decoration Module Level 3

CSS Fill and Stroke Module Level 3

Compositing and Blending Module Level 2

CSS Multi-column Layout Module Level 2

Cascading Style Sheets (CSS) Level 2

CSS Image Animation

Scalable Vector Graphics (SVG) 2

Filter Effects Module Level 1

CSS Generated Content for Paged Media Module Level 4

CSS Fonts Module Level 4

CSS Table Module Level 3

CSS Transforms Module Level 1

Compatibility Standard

CSS Box Sizing Module Level 3

CSS Basic User Interface Module Level 4

CSS Page Floats Module Level 3

CSS View Transitions Module Level 2

CSS Linked Parameters Module Level 1

CSS Exclusions Module Level 1

CSS Flexible Box Layout Module Level 1

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 Color Adjustment Module Level 1

CSS Display Module Level 4

CSS Animations Module Level 2

CSS Conditional Rules Module Level 5

CSS Overflow Module Level 3

CSS Containment Module Level 2

Pointer-driven Animations Module Level 1

CSS Transitions Module Level 1

CSS Will Change Module Level 1

CSS Regions Module Level 1

Animation Triggers

CSS Viewport Module Level 1

CSS Animations Module Level 1

Compatibility Standard

CSS Writing Modes Module Level 4

Scroll-driven Animations Module Level 1

CSS Transitions Module Level 2

CSS Values and Units Module Level 5

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

Scalable Vector Graphics (SVG) 2

CSS Fonts Module Level 4

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

CSS Icon from Wiki under Creative Commons

⏫