CSS animated properties

This page lists all CSS properties and indicates if and how they are animatable.

Animations
Property Animatable
animation no
animation-delay no
animation-direction no
 
animation-duration no
animation-fill-mode no
animation-iteration-count no
 
animation-name no
 
animation-play-state no
animation-timing-function no
Motion
Property Animatable
motion no
motion-path no
motion-offset yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
motion-rotation yes, as a number
Transitions
Property Animatable
transition no
transition-delay no
transition-duration no
transition-property no
transition-timing-function no
Transforms
Property Animatable
transform yes, as a transform
transform-origin yes, as a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
transform-style no
transform-box no
perspective yes, as a length
perspective-origin yes, as a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
backface-visibility no
Color
Property Animatable
color yes, as a color
opacity yes, as a number
Columns
Property Animatable
columns as each of the properties of the shorthand:
column-width yes, as a length
column-count yes, as an integer
column-gap yes, as a length
column-rule as each of the properties of the shorthand:
  • column-rule-color: yes, as a color
  • column-rule-style: no
  • column-rule-width: yes, as a length
column-rule-color yes, as a color
column-rule-style no
column-rule-width yes, as a length
break-before no
break-after no
break-inside no
column-span no
column-fill no
Text
Property Animatable
hyphens no
letter-spacing yes, as a length
word-wrap no
overflow-wrap no
text-transform no
tab-size no (This may change before the specification reaches Candidate Recommendation)
text-align no
text-align-last no
text-indent yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
white-space no
word-break no
word-spacing yes, as a length
line-break no
text-size-adjust no
Text decorations
Property Animatable
text-decoration as each of the properties of the shorthand:
  • text-decoration-color: yes, as a color
  • text-decoration-style: no
  • text-decoration-line: no
text-decoration-color yes, as a color
text-decoration-style no
text-decoration-line no
text-decoration-skip no
text-shadow yes, as a shadow list
text-underline-position no
Writing modes
Property Animatable
direction no
unicode-bidi no
writing-mode no
text-orientation no
text-combine-upright no
Flexible boxes
Property Animatable
align-content no
align-items no
align-self no
flex-basis yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
flex-direction no
flex-flow no
flex-grow yes, as a number
flex-shrink yes, as a number
flex as each of the properties of the shorthand:
  • flex-grow: yes, as a number
  • flex-shrink: yes, as a number
  • flex-basis: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
flex-wrap no
justify-content no
order yes, as an integer
Background & Borders
Property Animatable
background as each of the properties of the shorthand:
  • background-color: yes, as a color
  • background-image: no
  • background-clip: no
  • background-position: yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • background-size: yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. . This means keyword values are not animatable.
  • background-repeat: no
  • background-attachment: no
background-attachment no
background-clip no
background-color yes, as a color
background-image no
background-origin no
background-position yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
background-repeat no
background-size yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. . This means keyword values are not animatable.
border as each of the properties of the shorthand:
  • border-color: as each of the properties of the shorthand:
    • border-bottom-color: yes, as a color
    • border-left-color: yes, as a color
    • border-right-color: yes, as a color
    • border-top-color: yes, as a color
  • border-style: no
  • border-width: as each of the properties of the shorthand:
    • border-bottom-width: yes, as a length
    • border-left-width: yes, as a length
    • border-right-width: yes, as a length
    • border-top-width: yes, as a length
border-bottom as each of the properties of the shorthand:
  • border-bottom-color: yes, as a color
  • border-bottom-style: no
  • border-bottom-width: yes, as a length
border-bottom-color yes, as a color
border-bottom-left-radius yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
border-bottom-right-radius yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
border-bottom-style no
border-bottom-width yes, as a length
border-color as each of the properties of the shorthand:
  • border-bottom-color: yes, as a color
  • border-left-color: yes, as a color
  • border-right-color: yes, as a color
  • border-top-color: yes, as a color
border-image no
border-image-outset no
border-image-repeat no
border-image-slice no
border-image-source no
border-image-width no
border-left as each of the properties of the shorthand:
  • border-left-color: yes, as a color
  • border-left-style: no
  • border-left-width: yes, as a length
border-left-color yes, as a color
border-left-style no
border-left-width yes, as a length
border-radius as each of the properties of the shorthand:
  • border-top-left-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • border-top-right-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • border-bottom-right-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • border-bottom-left-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
border-right as each of the properties of the shorthand:
  • border-right-color: yes, as a color
  • border-right-style: no
  • border-right-width: yes, as a length
border-right-color yes, as a color
border-right-style no
border-right-width yes, as a length
border-style no
border-top as each of the properties of the shorthand:
  • border-top-color: yes, as a color
  • border-top-style: no
  • border-top-width: yes, as a length
border-top-color yes, as a color
border-top-left-radius yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
border-top-right-radius yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
border-top-style no
border-top-width yes, as a length
border-width as each of the properties of the shorthand:
  • border-bottom-width: yes, as a length
  • border-left-width: yes, as a length
  • border-right-width: yes, as a length
  • border-top-width: yes, as a length
Box Model
Property Animatable
box-decoration-break no
box-shadow yes, as a shadow list
margin yes, as a length
margin-bottom yes, as a length
margin-left yes, as a length
margin-right yes, as a length
margin-top yes, as a length
padding yes, as a length
padding-bottom yes, as a length
padding-left yes, as a length
padding-right yes, as a length
padding-top yes, as a length
box-sizing no
max-height yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
min-height yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
height yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
max-width yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
min-width yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
width yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
overflow no
overflow-x no
overflow-y no
visibility yes, as a visibility
Table
Property Animatable
border-collapse no
border-spacing no
caption-side no
empty-cells no
table-layout no
vertical-align yes, as a length
Positioning
Property Animatable
bottom yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
left yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
right yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
top yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
float no
clear no
position no
z-index yes, as an integer
Fonts
Property Animatable
font as each of the properties of the shorthand:
font-family no
font-variant no
font-variant-ligatures no
font-weight yes, as a font weight
font-stretch yes, as a font stretch
font-size yes, as a length
line-height yes, as a number, a length
font-feature-settings no
font-language-override no
font-size-adjust yes, as a number
font-style no
font-synthesis no
font-kerning no
font-variant-ligatures no
font-variant-position no
font-variant-caps no
font-variant-numeric no
font-variant-east-asian no
font-variant-alternates no
Images
Property Animatable
object-fit no
object-position yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
image-rendering no
image-orientation no
Counters & Lists
Property Animatable
counter-increment no
counter-reset no
list-style no
list-style-image no
list-style-position no
list-style-type no
Page
Property Animatable
orphans no
page-break-after no
page-break-before no
page-break-inside no
widows no
User interface
Property Animatable
outline as each of the properties of the shorthand:
  • outline-color: yes, as a color
  • outline-width: yes, as a length
  • outline-style: no
outline-color yes, as a color
outline-width yes, as a length
outline-style no
outline-offset yes, as a length
cursor no
resize no
text-overflow no
Generated content
Property Animatable
content no
quotes no
Fragmentation
Property Animatable
box-decoration-break no
Miscellaneous
Property Animatable
clip yes, as a rectangle
display no
ime-mode no
all as each of the properties of the shorthand (all properties but unicode-bidi and direction)
will-change no
text-rendering no
Compositing and Blending
Property Animatable
background-blend-mode no
mix-blend-mode no
isolation no
Shapes
Property Animatable
shape-outside yes, as *Unknown value in DB (basic-shape)*
shape-margin yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
shape-image-threshold yes, as a number
Pointer Events
Property Animatable
touch-action no
Inline
Property Animatable
initial-letter no
initial-letter-align no
Display
Property Animatable
display-inside no
display-outside no
display-list no
box-suppress no
CSSOM View
Property Animatable
scroll-behavior no
Logical Properties
Property Animatable
block-size no
inline-size no
min-block-size no
min-inline-size no
max-block-size no
max-inline-size no
margin-block-start no
margin-block-end no
margin-inline-start no
margin-inline-end no
offset-block-start no
offset-block-end no
offset-inline-start no
offset-inline-end no
padding-block-start no
padding-block-end no
padding-inline-start no
padding-inline-end no
border-block-start-width no
border-block-end-width no
border-inline-start-width no
border-inline-end-width no
border-block-start-style no
border-block-end-style no
border-inline-start-style no
border-inline-end-style no
border-block-start-color no
border-block-end-color no
border-inline-start-color no
border-inline-end-color no
border-block-start no
border-block-end no
border-inline-start no
border-inline-end no
Ruby
Property Animatable
ruby-position no
ruby-merge no
ruby-align no
Scroll Snap Points
Property Animatable
scroll-snap-type no
scroll-snap-points-x no
scroll-snap-points-y no
scroll-snap-destination yes, as *Unknown value in DB (position)*
scroll-snap-coordinate yes, as *Unknown value in DB (position)*

 

Document Tags and Contributors

Tags: 
Last updated by: jpmedley,