Animatable Properties in CSS3
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.

PropertyAnimatableTest
backgroundsee individual propertiesExample
background-coloras a colorExample
background-positionas 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
bordersee individual propertiesExample
border-bottomsee individual propertiesExample
border-bottom-coloras a colorExample
border-bottom-left-radius as a length, percentage or calc()Example
border-bottom-right-radius as a length, percentage or calc()Example
border-bottom-widthas a lengthExample
border-coloras a colorExample
border-leftsee individual propertiesExample
border-left-coloras a colorExample
border-left-widthas a lengthExample
border-radius see individual propertiesExample
border-rightsee individual propertiesExample
border-right-coloras a colorExample
border-right-widthas a lengthExample
border-spacingas a simple list of lengthExample
border-topsee individual propertiesExample
border-top-coloras a colorExample
border-top-left-radius as a length, percentage or calc()Example
border-top-right-radius as a length, percentage or calc()Example
border-top-widthas a lengthExample
bottomas a length, percentage or calc()Example
box-shadow as a shadow listExample
clipas a rectangleExample
coloras a colorExample
column-count as an integerExample
column-gap as a lengthExample
column-rule see individual propertiesExample
column-rule-color as a colorExample
column-rule-width as a lengthExample
column-width as a lengthExample
columns see individual propertiesExample
flex see individual propertiesExample
flex-basis as a length, percentage or calc()Example
flex-grow as a numberExample
flex-shrink as a numberExample
fontsee individual propertiesExample
font-sizeas a lengthExample
font-size-adjust as a numberExample
font-stretch as a font stretchExample
font-weightas a font weightExample
heightas a length, percentage or calc()Example
leftas a length, percentage or calc()Example
letter-spacingas a lengthExample
line-heightas a number or lengthExample
marginas a lengthExample
margin-bottomas a lengthExample
margin-leftas a lengthExample
margin-rightas a lengthExample
margin-topas a lengthExample
max-heightas a length, percentage or calc()Example
max-widthas a length, percentage or calc()Example
min-heightas a length, percentage or calc()Example
min-widthas a length, percentage or calc()Example
opacity as a numberExample
order as an integerExample
outlinesee individual propertiesExample
outline-coloras a colorExample
outline-offset as a lengthExample
outline-widthas a lengthExample
paddingas a lengthExample
padding-bottomas a lengthExample
padding-leftas a lengthExample
padding-rightas a lengthExample
padding-topas a lengthExample
perspective as a lengthExample
perspective-origin as a simple list of a length, percentage or calc()Example
rightas a length, percentage or calc()Example
text-decoration-color as a colorExample
text-indentas a length, percentage or calc()Example
text-shadow as a shadow listExample
topas a length, percentage or calc()Example
transform as a transformExample
transform-origin as a simple list of a length, percentage or calc()Example
vertical-alignas a lengthExample
visibilityas a visibilityExample
widthas a length, percentage or calc()Example
word-spacingas a lengthExample
z-indexas an integerExample