Oli Studholme整理了一份清单，详细列出了过渡所支持的属性。

from:http://oli.jp/2010/css-animatable-properties/

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:

• Mozilla Developer Connection: CSS Transitions and CSS Animations
• Let the Web move you – CSS3 Animations and Transitions by John Allsopp
• CSS3 Transitions — Thank God We Have A Specification! by Rodney Rehm

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:

• -moz-box-flex etc.
• -moz-image-region
• -moz-outline-radius etc.

---

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!

Tweet

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

Changes #

1. 2011-05-27Properties now ordered alphabetically within groups, color group subsumed, catch-all allproperty along with clip and (some?) animatable SVG properties added, additional (non-specced) properties from Mozilla Developer Connection noted, and extra usage notes added
2. 2011-12-27In 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. 2012-01-04I 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. 2012-01-20Adding another snippet of goodness from the manuscript for Alexander Røyne (@phun_ky)
5. 2012-03-07Adding a note about Chrome 19 Canary supporting background-image transitions (thanks @paul_irish)
6. 2012-05-31Noting that Opera 12 beta supports transitioning and animating shorthand properties (thanks @ourmaninjapan)
7. 2013-04-21Complete 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.