We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

# 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-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-shadow` yes, as a shadow list
`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
`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-style`: no
• `font-variant`: 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-family`: no
`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-size-adjust` yes, as a number
`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,