Following is a list of animatable properties as given in the CSS Transitions specification. Because this only lists the CSS 2.1 properties that are animatable, it is not complete, but it is illustrative for understanding which kinds of properties are animatable and in what ways, and which properties are not.
| Property name | Interpolation | |
|---|---|---|
| Color | ||
color
|
as color | |
opacity
|
as number | |
| columns | ||
column-width
|
as length | |
column-count
|
as integer | |
column-gap
|
as length | |
column-rule (see longhands)
|
||
column-rule-color:
|
as color | |
column-rule-style:
|
no | |
column-rule-width:
|
as length | |
break-before
|
no | |
break-after
|
no | |
break-inside
|
no | |
column-span
|
no | |
column-fill
|
no | |
| text | ||
hyphens
|
no | |
letter-spacing
|
as length | |
word-wrap
|
no | |
overflow-wrap
|
no | |
text-transform
|
no | |
tab-size
|
as length | |
text-align
|
no | |
text-align-last
|
no | |
text-indent
|
as length, percentage, or calc(); | |
direction
|
no | |
white-space
|
no | |
word-break
|
no | |
word-spacing
|
as length | |
line-break
|
no | |
| Text decorations | ||
text-decoration-color:
|
as color | |
text-decoration-style:
|
no | |
text-decoration-line:
|
no | |
text-decoration-skip
|
no | |
text-shadow
|
as shadow list | |
text-underline-position
|
no | |
| Flexible boxes | ||
align-content
|
no | |
align-items
|
no | |
align-self
|
no | |
flex-basis
|
as length, percentage, or calc(); | |
flex-direction
|
no | |
flex-flow
|
no | |
flex (see longhand)
|
||
flex-grow
|
as number | |
flex-shrink
|
as number | |
flex-basis:
|
as length, percentage, or calc(); | |
flex-wrap
|
no | |
justify-content
|
no | |
order
|
as integer | |
| Background and borders | ||
background
|
||
background-color:
|
as color | |
background-image:
|
no | |
background-clip:
|
no | |
background-position:
|
as list of length, percentage, or calc | |
background-size:
|
as list of length, percentage, or calc | |
background-repeat:
|
no | |
background-attachment
|
no | |
abackground-origin
|
no | |
| Borders | ||
border (see longhand)
|
||
border-color
|
as color | |
border-style
|
no | |
border-width
|
as length | |
border-radius
|
as length, percentage, or calc(); | |
border-image
|
no (see longhand) | |
border-image-outset
|
no | |
border-image-repeat
|
no | |
border-image-slice
|
no | |
border-image-source
|
no | |
border-image-width
|
no | |
| Box model | ||
box-decoration-break
|
no | |
box-shadow
|
as shadow list | |
margin
|
as length | |
padding
|
as length | |
box-sizing
|
no | |
max-height
|
as length, percentage, or calc(); | |
min-height
|
as length, percentage, or calc(); | |
height
|
as length, percentage, or calc(); | |
max-width
|
as length, percentage, or calc(); | |
min-width
|
as length, percentage, or calc(); | |
width
|
as length, percentage, or calc(); | |
overflow
|
no | |
visibility
|
as visibility (see “How Property Values Are Interpolated”) | |
| Table | ||
border-collapse
|
no | |
border-spacing
|
no | |
caption-side
|
no | |
empty-cells
|
no | |
table-layout
|
no | |
vertical-align
|
as length | |
| Positioning | ||
bottom
|
as length, percentage, or calc(); | |
left
|
as length, percentage, or calc(); | |
right
|
as length, percentage, or calc(); | |
top
|
as length, percentage, or calc(); | |
float
|
no | |
clear
|
no | |
position
|
no | |
z-index
|
as integer | |
| Fonts | ||
font (see longhand)
|
||
font-style
|
no | |
font-variant
|
no | |
font-weight
|
as font weight | |
font-stretch
|
as font stretch | |
font-size
|
as length | |
line-height
|
as number, length | |
font-family
|
no | |
font-variant-ligatures
|
no | |
font-feature-settings
|
no | |
font-language-override
|
no | |
font-size-adjust
|
as number | |
font-synthesis
|
no | |
font-kerning
|
no | |
font-variant-position
|
no | |
font-variant-caps
|
no | |
font-variant-numeric
|
no | |
font-variant-east-asian
|
no | |
font-variant-alternates
|
no | |
| Images | ||
object-fit
|
no | |
object-position
|
as length, percentage, or calc(); | |
image-rendering
|
no | |
image-orientation
|
no | |
| Counters, lists, and generated content | ||
content
|
no | |
quotes
|
no | |
counter-increment
|
no | |
counter-reset
|
no | |
list-style
|
no | |
list-style-image
|
no | |
list-style-position
|
no | |
list-style-type
|
no | |
| Page | ||
orphans
|
no | |
page-break-after
|
no | |
page-break-before
|
no | |
page-break-inside
|
no | |
widows
|
no | |
| User interface | ||
outline (see longhand)
|
||
outline-color
|
as color | |
outline-width
|
as length | |
outline-style
|
no | |
outline-offset
|
as length | |
cursor
|
no | |
resize
|
no | |
text-overflow
|
no | |
| Animations | ||
animation
|
no (see longhands) | |
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, though animation-timing-function can be included in keyframes
|
|
| Transitions | ||
transition
|
no (see longhands) | |
transition-delay
|
no | |
transition-duration
|
no | |
transition-property
|
no | |
transition-timing-function
|
no | |
| Transform properties | ||
transform
|
as transform (see Transforms in CSS [O’Reilly]) | |
transform-origin
|
as length, percentage or calc(); | |
transform-style
|
no | |
perspective
|
as length | |
perspective-origin
|
as simple list of a length, percentage or calc(); | |
backface-visibility
|
no | |
| Compositing and blending | ||
background-blend-mode
|
no | |
mix-blend-mode
|
no | |
isolation
|
no | |
| Shapes | ||
shape-outside
|
yes, as basic-shape
|
|
shape-margin
|
as length, percentage, or calc(); | |
shape-image-threshold
|
as number | |
| Miscellaneous | ||
clip (deprecated)
|
as rectangle | |
display
|
no | |
unicode-bidi
|
no | |
text-orientation
|
no | |
ime-mode
|
no | |
all |
as each of the properties of the shorthand (all properties but unicode-bidi and direction)
|
|
will-change
|
no | |
box-decoration-break
|
no | |
touch-action
|
no | |
initial-letter
|
no | |
initial-letter-align
|
no | |