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-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

     

    文档标签和贡献者

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