January 19th, 2020

Animatable Properties in CSS3

The following section contains a complete list of animatable properties belonging to the latest CSS3 specifications. All the properties are listed alphabetically.

Property	Animatable	Test
background	see individual properties	Example
background-color	as a color	Example
background-position	as a repeatable list of a simple list of a length, percentage or calc()	Example
background-size	as a repeatable list of a simple list of a length, percentage or calc()	Example
border	see individual properties	Example
border-bottom	see individual properties	Example
border-bottom-color	as a color	Example
border-bottom-left-radius	as a length, percentage or calc()	Example
border-bottom-right-radius	as a length, percentage or calc()	Example
border-bottom-width	as a length	Example
border-color	as a color	Example
border-left	see individual properties	Example
border-left-color	as a color	Example
border-left-width	as a length	Example
border-radius	see individual properties	Example
border-right	see individual properties	Example
border-right-color	as a color	Example
border-right-width	as a length	Example
border-spacing	as a simple list of length	Example
border-top	see individual properties	Example
border-top-color	as a color	Example
border-top-left-radius	as a length, percentage or calc()	Example
border-top-right-radius	as a length, percentage or calc()	Example
border-top-width	as a length	Example
bottom	as a length, percentage or calc()	Example
box-shadow	as a shadow list	Example
clip	as a rectangle	Example
color	as a color	Example
column-count	as an integer	Example
column-gap	as a length	Example
column-rule	see individual properties	Example
column-rule-color	as a color	Example
column-rule-width	as a length	Example
column-width	as a length	Example
columns	see individual properties	Example
flex	see individual properties	Example
flex-basis	as a length, percentage or calc()	Example
flex-grow	as a number	Example
flex-shrink	as a number	Example
font	see individual properties	Example
font-size	as a length	Example
font-size-adjust	as a number	Example
font-stretch	as a font stretch	Example
font-weight	as a font weight	Example
height	as a length, percentage or calc()	Example
left	as a length, percentage or calc()	Example
letter-spacing	as a length	Example
line-height	as a number or length	Example
margin	as a length	Example
margin-bottom	as a length	Example
margin-left	as a length	Example
margin-right	as a length	Example
margin-top	as a length	Example
max-height	as a length, percentage or calc()	Example
max-width	as a length, percentage or calc()	Example
min-height	as a length, percentage or calc()	Example
min-width	as a length, percentage or calc()	Example
opacity	as a number	Example
order	as an integer	Example
outline	see individual properties	Example
outline-color	as a color	Example
outline-offset	as a length	Example
outline-width	as a length	Example
padding	as a length	Example
padding-bottom	as a length	Example
padding-left	as a length	Example
padding-right	as a length	Example
padding-top	as a length	Example
perspective	as a length	Example
perspective-origin	as a simple list of a length, percentage or calc()	Example
right	as a length, percentage or calc()	Example
text-decoration-color	as a color	Example
text-indent	as a length, percentage or calc()	Example
text-shadow	as a shadow list	Example
top	as a length, percentage or calc()	Example
transform	as a transform	Example
transform-origin	as a simple list of a length, percentage or calc()	Example
vertical-align	as a length	Example
visibility	as a visibility	Example
width	as a length, percentage or calc()	Example
word-spacing	as a length	Example
z-index	as an integer	Example