HTML and CSS Reference
In-Depth Information
Choosing Which Properties to Animate
The
transition-property
property accepts the keyword
all
or a comma-separated list of properties you want to
animate. Only those properties listed in Table
20-4
can be animated.
Table 20-4.
Animatable CSS Properties
Property Names
background-color
column-gap *
min-width
background-position
column-rule-color *
opacity
background-size *
column-rule-width *
outline-color
border-bottom-color
column-width *
outline-offset
border-bottom-width
crop
outline-width
border-left-color
font-size
padding-bottom
border-left-width
font-size-adjust *
padding-left
border-right-color
font-stretch
padding-right
border-right-width
font-weight
padding-top
border-spacing
height
right
border-top-color
left
text-decoration-color *
border-top-width
letter-spacing
text-indent
border-top-left-radius *
line-height
text-shadow
border-top-right-radius *
margin-bottom
top
border-bottom-right-radius *
margin-left
transform *
border-bottom-left-radius *
margin-right
transform-origin *
bottom
margin-top
vertical-align
box-shadow *
marker-offset *
visibility
clip
max-height
width
color
max-width
word-spacing
column-count *
min-height
z-index
* Supported by Firefox and under consideration for inclusion in the specification.
Unless you want to apply different transition effects to individual properties, it's best to use the keyword
all
.
Alternatively, you can omit
transition-property
altogether because
all
is the default value.
■
The list of animatable properties in Table
20-4
doesn't include shorthand properties, such as
border
,
margin
, or
padding
. You need to animate the individual properties.
Caution
