Oli.jp

Articles…

CSS animatable properties

This is a reordered list of animatable CSS properties and their animatable values, based on the CSS Transitions Module (level 3) Editor’s Draft, plus the “Animatable:” status for each property of each CSS3 spec Editor’s Draft. This is the theory. For browser support info go to CSS Animatable Properties: Browser support, a collaboration with Rodney Rehm.

You can find out more about CSS Transitions and Animations in:

Remember that if the property uses a vendor prefix, you’ll need to also prefix it when using with CSS Transitions or Animations, e.g.:

.postcard:hover {
  -webkit-transition-property: -webkit-transform;
     -moz-transition-property:    -moz-transform;
      -ms-transition-property:     -ms-transform;
       -o-transition-property:      -o-transform;
          transition-property:         transform;
}
Property Type Property Name Transitionable Values
Catch-all all (all transitionable properties)
Text properties color color
font shorthand (see individual properties)
font-size length or percentage
font-size-adjust number
font-stretch keywords (in steps)
font-weight number or keywords (excluding bolder, lighter)
letter-spacing length
line-height number or length
max-lines (for overflow) integer
text-decoration-color color
text-emphasis-color color
text-indent length, percentage, or calc
text-shadow shadow
text-size-adjust percentage
vertical-align keywords, length, or percentage
word-spacing length or percentage
Box properties background shorthand (see individual properties)
background-color color
background-image 2 images, gradients
background-position as repeatable, simple list of percentage, length, or calc
background-size 4 as repeatable, simple list of percentage, length, or calc
border shorthand (see individual properties)
border-color shorthand (see individual properties)
border-top-color etc3 color
border-radius shorthand (see individual properties)
border-top-right-radius etc3 length (one or two values)
border-spacing as simple list of length
border-top etc shorthands3 (see individual properties)
border-width shorthand (see individual properties)
border-top-width etc3 length
box-shadow as shadow list (at risk)
clip rectangle
crop rectangle
height, min-height, max-height length, percentage, or calc
margin (see individual properties)
margin-top etc3 length
opacity number
outline-color color
outline-offset length
outline-width length
padding shorthand (see individual properties)
padding-top etc3 length
width, min-width, max-width length, percentage, or calc
Positioning properties top, right, bottom, left length, percentage, or calc
offset-before, offset-end, offset-after, offset-start length or percentage
visibility 5 visibility
z-index integer
zoom number
Multi-column layout properties columns shorthand (see individual properties)
column-count integer
column-gap length
column-rule shorthand (see individual properties)
column-rule-color color
column-rule-width length
column-width length
Flexbox properties flex shorthand (see individual properties)
flex-grow number (except to/from 0)
flex-shrink number (except to/from 0)
flex-basis same as width (length, percentage, or calc)
order integer
Transforms properties perspective length
perspective-origin as simple list of length, percentage, or calc
transform as transform
transform-origin as simple list of length, percentage, or calc
SVG properties fill paint server
fill-opacity float
flood-color color or keywords
lighting-color color or keywords
marker-offset length
stop-color color
stop-opacity float
stroke paint server
stroke-dasharray list of numbers
stroke-dashoffset number
stroke-miterlimit number
stroke-opacity float
stroke-width float
viewport-fill color
viewport-fill-opacity color
  1. Shorthand properties can be used to specify values for their animatable individual properties.
  2. While CSS Backgrounds and Borders Module Level 3 Editor’s Draft says “Animatable: no” for background-image at the time of writing, support for crossfading images in CSS appeared in Chrome 19 Canary. Until widespread support arrives this can be faked via image sprites and background-position or opacity. To animate gradients they must be the same type.
  3. Currently the spec only defines individual properties containing -top-, -bottom-, -left- and -right- values for border-color, border-radius, border-width, margin, padding. WebKit browsers, Firefox, and Opera 12 beta can also animate the shorthand properties.
  4. background-size can’t be animated using keyword values.
  5. visibility animates despite the CSS Basic Box Model spec saying “Animatable: no”

Note there are some additional properties that Firefox supports, but it’s unlikely they’ll be added to the specs:


There are several properties or values you’ll want to transition, but which are not supported by browsers or the specs at the time of writing:

  • background-image (support is iffy)
  • float
  • height or width using the value auto (currently both values must be a length or percentage)
    • The same applies to top, right, bottom and left, but despite the spec (and probably due to a bug) WebKit browsers can animate these using auto
  • display between none and anything else
  • position between static and absolute

The CSS Working Group is aware of these issues, and for example transitioning background-image is being worked on, so while some of these are just damn hard for a browser to actually do, this may change in the future!

If you have any feedback, please let me know via Twitter (@boblet).

Changes

  1. Properties now ordered alphabetically within groups, color group subsumed, catch-all all property along with clip and (some?) animatable SVG properties added, additional (non-specced) properties from Mozilla Developer Connection noted, and extra usage notes added
  2. In a turn for the ironic, the Mozilla Developer Connection wiki (which I used as a reference when writing this article) has removed its list of animatable properties and replaced them with a link to … this article. Luckily David Baron has added a note on Gecko-specific properties to the Editor’s spec (thanks!).
  3. I realised that WebKit, Firefox, and Opera can also animate the shorthands border-width, border-color, margin, padding. I’ve updated the table to match the spec’s per-side properties.
  4. Adding another snippet of goodness from the manuscript for Alexander Røyne (@phun_ky)
  5. Adding a note about Chrome 19 Canary supporting background-image transitions (thanks @paul_irish)
  6. Noting that Opera 12 beta supports transitioning and animating shorthand properties (thanks @ourmaninjapan)
  7. Complete rewrite thanks to the prompting of Rodney Rehm: his excellent article CSS3 Transitions — Thank God We Have A Specification! is essential reading. Checked every CSS3 spec for “Animatable:” values in property descriptions, and added/updated a bunch of properties (hello calc), plus spec links to each property. Also added the Multi-column Layout, Flexbox and Transitions sections. Removed Grid Layout (for now) and outdated info. Stripped ins/del elements that were no longer necessary.