CSS Animatable Properties

The following section lists the properties that are animatable in CSS.

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
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.