We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

# CSS animated properties Redirect 1

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
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
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.
direction no
white-space no
word-break no
word-spacing yes, as a length
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-underline-position 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, except between 0 and other values
flex-shrink yes, as a number, except between 0 and other values
flex as each of the properties of the shorthand:
• flex-grow: yes, as a number, except between 0 and other values
• flex-shrink: yes, as a number, except between 0 and other values
• 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
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
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-style no
Images
Property Animatable
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
Miscellaneous
Property Animatable
clip yes, as a rectangle
display no
unicode-bidi no
ime-mode no
all as each of the properties of the shorthand (all properties but unicode-bidi and direction)
Compositing and Blending
Property Animatable
background-blend-mode no
mix-blend-mode no

## Document Tags and Contributors

Last updated by: Sheppy,