Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

# CSS animated properties

此页面列出了所有的CSS属性并说明它是否支持CSS动画。

Animations
属性 是否支持动画
`animation`
`animation-delay`
`animation-direction`

`animation-duration`
`animation-fill-mode`
`animation-iteration-count`

`animation-name`

`animation-play-state`
`animation-timing-function`
Transitions
属性 是否支持动画
`transition`
`transition-delay`
`transition-duration`
`transition-property`
`transition-timing-function`
Transforms
属性 是否支持动画
`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`
`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`
Color
属性 是否支持动画
`color` yes, as a color
`opacity` yes, as a number
Columns
属性 是否支持动画
`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`
`column-rule-width` yes, as a length
`break-before`
`break-after`
`break-inside`
`column-span`
`column-fill`
Text
属性 是否支持动画
`hyphens`
`letter-spacing` yes, as a length
`word-wrap`
`overflow-wrap`
`text-transform`
`tab-size` (This may change before the specification reaches Candidate Recommendation)
`text-align`
`text-align-last`
`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`
`white-space`
`word-break`
`word-spacing` yes, as a length
Text decorations
属性 是否支持动画
`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`
`text-decoration-line`
`text-decoration-skip`
`text-shadow` yes, as a shadow list
`text-underline-position`
Flexible boxes
属性 是否支持动画
`align-content`
`align-items`
`align-self`
`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`
`flex-flow`
`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`
`justify-content`
`order` yes, as an integer
Background & Borders
属性 是否支持动画
`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`
`background-clip`
`background-color` yes, as a color
`background-image`
`background-origin`
`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`
`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`
`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`
`border-image-outset`
`border-image-repeat`
`border-image-slice`
`border-image-source`
`border-image-width`
`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`
`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`
`border-right-width` yes, as a length
`border-style`
`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`
`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
属性 是否支持动画
`box-decoration-break`
`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`
`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`
`overflow-x`
`overflow-y`
`visibility` yes, as a visibility
Table
属性 是否支持动画
`border-collapse`
`border-spacing`
`caption-side`
`empty-cells`
`table-layout`
`vertical-align` yes, as a length
Positioning
属性 是否支持动画
`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`
`clear`
`position`
`z-index` yes, as an integer
Fonts
属性 是否支持动画
`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`
`font-variant`
`font-variant-ligatures`
`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`
`font-size-adjust` yes, as a number
`font-style`
Images
属性 是否支持动画
`image-rendering`
`image-orientation`
Counters & Lists
属性 是否支持动画
`counter-increment`
`counter-reset`
`list-style`
`list-style-image`
`list-style-position`
`list-style-type`
Page
属性 是否支持动画
`orphans`
`page-break-after`
`page-break-before`
`page-break-inside`
`widows`
User interface
属性 是否支持动画
`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`
`outline-offset` yes, as a length
`cursor`
`resize`
`text-overflow`
Generated content
属性 是否支持动画
`content`
`quotes`
Miscellaneous
属性 是否支持动画
`clip` yes, as a rectangle
`display`
`unicode-bidi`
`ime-mode`
`all` as each of the properties of the shorthand (all properties but `unicode-bidi` and `direction`)
Compositing and Blending
属性 是否支持动画
`background-blend-mode`
`mix-blend-mode`

## 文档标签和贡献者

此页面的贡献者有： ziyunfei, feiwen8772, teoli
最后编辑者: teoli,