CSS animated properties

3 位贡献者:

此页面列出了所有的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-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-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

 

文档标签和贡献者

向此页面作出贡献: teoli, ziyunfei, feiwen8772
最后编辑者: teoli,