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 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 Generated Content Module Level 3

CSS Mobile Text Size Adjustment Module Level 1

CSS Multi-column Layout Module Level 2

CSS Backgrounds Module Level 4

CSS Images Module Level 5

Compatibility Standard

CSS Display Module Level 4

  • display

    Animation type: see § 2.9 Animating and Interpolating display

  • order

    Animation type: by computed value type

CSS Color Module Level 4

  • color

    Animation type: by computed value type

  • opacity

    Animation type: by computed value type

CSS Fonts Module Level 5

  • font-size-adjust

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

CSS Anchor Positioning

Filter Effects Module Level 2

  • backdrop-filter

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

CSS Borders and Box Decorations Module Level 4

CSS Lists and Counters Module Level 3

CSS Grid Layout Module Level 3

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

CSS Gap Decorations Module Level 1

CSS Fonts Module Level 4

CSS Images Module Level 3

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

CSS Conditional Rules Module Level 5

  • container

    Animation type: see individual properties

CSS Containment Module Level 2

  • content-visibility

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

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 Positioned Layout Module Level 4

CSS Scrollbars Styling Module Level 1

CSS Scroll Snap Module Level 2

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 Overflow Module Level 4

CSS Table Module Level 3

CSS Rhythmic Sizing

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 Ruby Annotation Layout Module Level 1

CSS Scroll Snap Module Level 1

CSS Fill and Stroke Module Level 3

CSS Basic User Interface Module Level 4

CSS Overflow Module Level 3

  • overflow-clip-margin

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

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

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 Box Sizing Module Level 4

CSS Text Decoration Module Level 3

CSS Writing Modes Level 4

CSS Cascading and Inheritance Level 5

  • all

    Animation type: see individual properties

CSS Text Module Level 3

CSS Color Adjustment Module Level 1

CSS Positioned Layout Module Level 3

CSS Multi-column Layout Module Level 1

CSS Box Model Module Level 4

CSS Logical Properties and Values Level 1

CSS Shapes Module Level 2

CSS Shapes Module Level 1

CSS Inline Layout Module Level 3

CSS Page Floats

  • float

    Animation type: by computed value type

  • float-offset

    Animation type: by computed value type

Scroll-driven Animations

CSS Transforms Module Level 1

CSS Text Module Level 4

SVG Strokes

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

CSS Generated Content Module Level 3

CSS Multi-column Layout Module Level 2

CSS Backgrounds Module Level 4

CSS Linked Parameters

Compatibility Standard

CSS Display Module Level 4

CSS Anchor Positioning

CSS Generated Content for Paged Media Module Level 4

CSS Borders and Box Decorations Module Level 4

CSS Overflow Module Level 5

CSS Lists and Counters Module Level 3

CSS Line Grid Module Level 1

CSS Grid Layout Module Level 3

CSS Fragmentation Module Level 4

CSS Backgrounds and Borders Module Level 3

CSS Overscroll Behavior Module Level 1

CSS Gap Decorations Module Level 1

CSS Fonts Module Level 4

CSS Images Module Level 3

CSS Flexible Box Layout Module Level 1

CSS Images Module Level 4

CSS Grid Layout Module Level 2

CSS Spatial Navigation Level 1

CSS Scroll Anchoring Module Level 1

CSS Scrollbars Styling Module Level 1

CSS Round Display Level 1

CSS Masking Module Level 1

CSS Overflow Module Level 4

CSS Table Module Level 3

CSS Rhythmic Sizing

CSS Box Sizing Module Level 3

CSS Regions Module Level 1

CSS Ruby Annotation Layout Module Level 1

CSS Scroll Snap Module Level 1

CSS Paged Media Module Level 3

CSS Fill and Stroke Module Level 3

CSS Basic User Interface Module Level 4

CSS View Transitions Module Level 2

CSS Overflow Module Level 3

Filter Effects Module Level 1

Scalable Vector Graphics (SVG) 2

CSS Transforms Module Level 2

CSS Box Sizing Module Level 4

CSS Text Decoration Module Level 3

CSS View Transitions Module Level 1

CSS Text Module Level 3

CSS Color Adjustment Module Level 1

CSS Generated Content for Paged Media Module

CSS Positioned Layout Module Level 3

CSS Multi-column Layout Module Level 1

CSS Box Model Module Level 4

CSS Inline Layout Module Level 3

CSS Page Floats

CSS Transforms Module Level 1

CSS Text Module Level 4

CSS Text Decoration 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.

CSS Animations Level 2

Compositing and Blending Level 2

Compatibility Standard

CSS Display Module Level 4

CSS Animations Level 1

CSS Conditional Rules Module Level 5

CSS Containment Module Level 2

CSS Values and Units Module Level 5

CSS Regions Module Level 1

CSS Will Change Module Level 1

MathML Core

CSS Overflow Module Level 3

CSS Transitions Level 2

CSS Writing Modes Level 4

CSS Color Adjustment Module Level 1

CSS Transitions Level 1

Scroll-driven Animations

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

CSS Grid Layout Module Level 3

CSS Fonts Module Level 4

CSS 2

Scalable Vector Graphics (SVG) 2

CSS Exclusions Module Level 1

CSS Speech Module Level 1

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

CSS Icon from Wiki under Creative Commons

⏫