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.

Compatibility Standard

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

  • display

    Animation type: see § 2.9 Animating and Interpolating display

  • order

    Animation type: by computed value type

CSS Borders and Box Decorations Module Level 4

CSS Box Model Module Level 4

CSS Lists and Counters Module Level 3

CSS Color Module Level 4

  • color

    Animation type: by computed value type

  • opacity

    Animation type: by computed value type

CSS Logical Properties and Values Level 1

CSS Anchor Positioning

CSS Generated Content Module Level 3

CSS Backgrounds Module Level 4

CSS Backgrounds and Borders Module Level 3

CSS Images Module Level 5

CSS Images Module Level 3

CSS Mobile Text Size Adjustment Module Level 1

CSS Fonts Module Level 4

CSS Conditional Rules Module Level 5

  • container

    Animation type: see individual properties

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

CSS Containment Module Level 2

  • content-visibility

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

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

Filter Effects Module Level 2

  • backdrop-filter

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

CSS Scrollbars Styling Module Level 1

CSS Page Floats

  • float

    Animation type: by computed value type

  • float-offset

    Animation type: by computed value type

CSS Shapes Module Level 1

CSS Scroll Snap Module Level 1

CSS Overflow Module Level 4

CSS Fonts Module Level 5

  • font-size-adjust

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

CSS Table Module Level 3

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 3

CSS Basic User Interface Module Level 4

CSS Transforms Module Level 1

CSS Overflow Module Level 3

  • overflow-clip-margin

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

CSS Ruby Annotation Layout Module Level 1

Scroll-driven Animations

CSS Text Module Level 3

CSS Scroll Snap Module Level 2

CSS Fill and Stroke Module Level 3

CSS Writing Modes Level 4

CSS Rhythmic Sizing

Motion Path Module Level 1

Filter Effects Module Level 1

CSS Color HDR Module Level 1

CSS Cascading and Inheritance Level 5

  • all

    Animation type: see individual properties

CSS Shapes Module Level 2

CSS Box Sizing Module 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

SVG Strokes

CSS Multi-column Layout Module Level 1

CSS Text Decoration Module Level 4

CSS Inline Layout Module Level 3

CSS Text Module Level 4

CSS Grid Layout Module Level 3

CSS Positioned Layout Module Level 3

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

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

Compatibility Standard

CSS Box Alignment Module Level 3

CSS Flexible Box Layout Module Level 1

CSS Display Module Level 4

CSS Borders and Box Decorations Module Level 4

CSS Box Model Module Level 4

CSS Lists and Counters Module Level 3

CSS Line Grid Module Level 1

CSS Anchor Positioning

CSS Generated Content Module Level 3

CSS Backgrounds Module Level 4

CSS Overflow Module Level 5

CSS Spatial Navigation Level 1

CSS Backgrounds and Borders Module Level 3

CSS Generated Content for Paged Media Module Level 4

CSS Images Module Level 3

CSS Fonts Module Level 4

CSS Multi-column Layout Module Level 2

CSS Linked Parameters

CSS Generated Content for Paged Media Module

CSS Fragmentation Module Level 4

CSS Color Adjustment Module Level 1

CSS Overscroll Behavior Module Level 1

CSS Masking Module Level 1

CSS Box Sizing Module Level 3

CSS Scrollbars Styling Module Level 1

CSS Page Floats

CSS Images Module Level 4

CSS Scroll Snap Module Level 1

CSS Overflow Module Level 4

CSS Table Module Level 3

CSS Transforms Module Level 2

CSS Text Decoration Module Level 3

CSS View Transitions Module Level 1

CSS Basic User Interface Module Level 4

CSS Transforms Module Level 1

CSS Overflow Module Level 3

CSS Regions Module Level 1

CSS Ruby Annotation Layout Module Level 1

CSS Round Display Level 1

CSS Text Module Level 3

CSS Scroll Anchoring Module Level 1

CSS Fill and Stroke Module Level 3

CSS Rhythmic Sizing

CSS View Transitions Module Level 2

Filter Effects Module Level 1

CSS Paged Media Module Level 3

CSS Box Sizing Module Level 4

Scalable Vector Graphics (SVG) 2

CSS Multi-column Layout Module Level 1

CSS Text Decoration Module Level 4

CSS Inline Layout Module Level 3

CSS Text Module Level 4

CSS Grid Layout Module Level 3

CSS Positioned Layout Module Level 3

CSS Grid Layout Module Level 2

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 Animations Level 1

CSS Display Module Level 4

Compositing and Blending Level 2

CSS Animations Level 2

CSS Conditional Rules Module Level 5

CSS Color Adjustment Module Level 1

CSS Containment Module Level 2

CSS Overflow Module Level 3

CSS Regions Module Level 1

CSS Values and Units Module Level 5

Scroll-driven Animations

MathML Core

CSS Transitions Level 2

CSS Writing Modes Level 4

CSS Will Change Module Level 1

CSS Viewport Module Level 1

CSS Transitions 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 Fonts Module Level 4

CSS Speech Module Level 1

CSS Exclusions Module Level 1

Scalable Vector Graphics (SVG) 2

CSS 2

CSS Grid Layout Module Level 3

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

CSS Icon from Wiki under Creative Commons

⏫