CSS animatable properties

August 02, 2010

A reordered list based on the CSS Transitions Module (level 3) Working Draft and Editor’s Draft, for personal use. You can find out more about CSS Transitions and CSS Animations in the Mozilla Developer Connection wiki, or in John Allsopp’s article Let the Web move you – CSS3 Animations and Transitions. 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-size`	length, percentage
	`font-weight`	number, keywords (excluding `bolder`, `lighter`)
	`letter-spacing`	length
	`line-height`	number, length, percentage
	`text-indent`	length, percentage
	`text-shadow`	shadow
	`vertical-align`	keywords, length, percentage
	`word-spacing`	length, percentage
Box properties	`background`¹	color (currently)
	`background-color`	color
	`background-image`²	images, gradients
	`background-position`	percentage, length
	`border-left-color` etc³	color
	`border-spacing`	length
	`border-left-width` etc³	length
	`clip`	rectangle
	`crop`	rectangle
	`height`, `min-height`, `max-height`	length, percentage
	`margin-left` etc³	length
	`opacity`	number
	`outline-width`	length
	`outline-offset`	integer
	`outline-color`	color
	`padding-left` etc³	length
	`width`, `min-width`, `max-width`	length, percentage
Positioning properties	`bottom`	length, percentage
	`top`	length, percentage
	`grid-*`⁴	various
	`left`	length, percentage
	`right`	length, percentage
	`visibility`	visibility
	`z-index`	integer
	`zoom`	number
SVG properties	`fill`	paint server
	`fill-opacity`	float
	`flood-color`	color, keywords
	`lighting-color`	color, 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

While the shorthand background isn’t actually in the spec, it works (at least for background-color and background-position values)
This is still a little up in the air, with “only gradients” in the current Working Draft, and no background-image at all in the current Editor’s Draft. However both gradient and image transitions are specced in CSS Image Values and Replaced Content Module Level 3, so support should come soon. Until then this can be faked via image sprites and background-position or opacity.
Currently the spec only defines individual properties containing -top-, -bottom-, -left- and -right- values for border-width, border-color, margin, padding. WebKit browsers and Firefox (but not Opera, yet) can also animate the shorthand properties.
grid-* are properties of the Grid Layout module.

There are several properties or values you’ll want to transition, but which are both unspecced and unsupported at the time of writing:

background-image, including gradients
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 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 and transitioning auto for positioning properties are both being worked on, so I expect this will change in the future!

The spec now notes that “future CSS specifications should include an ‘Animatable:’ line in the summary of the property’s definition”, and these will supersede the table in the CSS3 Transitions spec.

Oli.jp

Articles…

CSS animatable properties