mozilla
Your Search Results

    CSS animated properties

    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.
    white-space no
    word-break no
    word-spacing yes, as a length
    line-break no
    text-size-adjust no
    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
    Writing modes
    Property Animatable
    direction no
    unicode-bidi no
    writing-mode no
    text-orientation 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
    flex-shrink yes, as a number
    flex as each of the properties of the shorthand:
    • flex-grow: yes, as a number
    • flex-shrink: yes, as a number
    • 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-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-language-override no
    font-size-adjust yes, as a number
    font-style no
    font-synthesis no
    font-kerning no
    font-variant-ligatures no
    font-variant-position no
    font-variant-caps no
    font-variant-numeric no
    font-variant-east-asian no
    font-variant-alternates no
    Images
    Property Animatable
    object-fit no
    object-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.
    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
    Fragmentation
    Property Animatable
    box-decoration-break no
    Miscellaneous
    Property Animatable
    clip yes, as a rectangle
    display no
    ime-mode no
    all as each of the properties of the shorthand (all properties but unicode-bidi and direction)
    will-change no
    text-rendering no
    Compositing and Blending
    Property Animatable
    background-blend-mode no
    mix-blend-mode no
    isolation no
    Shapes
    Property Animatable
    shape-outside yes, as *Unknown value in DB (basic-shape)*
    shape-margin 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.
    shape-image-threshold yes, as a number
    Pointer Events
    Property Animatable
    touch-action no
    Inline
    Property Animatable
    initial-letter no
    initial-letter-align no
    Display
    Property Animatable
    display-inside no
    display-outside no
    display-list no
    box-suppress no
    CSSOM View
    Property Animatable
    scroll-behavior no
    Logical Properties
    Property Animatable
    block-size no
    inline-size no
    min-block-size no
    min-inline-size no
    max-block-size no
    max-inline-size no
    margin-block-start no
    margin-block-end no
    margin-inline-start no
    margin-inline-end no
    offset-block-start no
    offset-block-end no
    offset-inline-start no
    offset-inline-end no
    padding-block-start no
    padding-block-end no
    padding-inline-start no
    padding-inline-end no
    border-block-start-width no
    border-block-end-width no
    border-inline-start-width no
    border-inline-end-width no
    border-block-start-style no
    border-block-end-style no
    border-inline-start-style no
    border-inline-end-style no
    border-block-start-color no
    border-block-end-color no
    border-inline-start-color no
    border-inline-end-color no
    border-block-start no
    border-block-end no
    border-inline-start no
    border-inline-end no
    Ruby
    Property Animatable
    ruby-position no
    ruby-merge no
    ruby-align no
    Scroll Snap Points
    Property Animatable
    scroll-snap-type no
    scroll-snap-points-x no
    scroll-snap-points-y no
    scroll-snap-destination yes, as *Unknown value in DB (position)*
    scroll-snap-coordinate yes, as *Unknown value in DB (position)*

     

    Document Tags and Contributors

    Tags: 
    Contributors to this page: Sheppy, tregagnon, ziyunfei, rebeccahauck, teoli, Marsf, Sebastianz, FredB
    Last updated by: tregagnon,