CSS BASIC
CSS BOX MODEL
CSS ADVANCED
CSS3 FEATURES
CSS3 EXAMPLES
CSS3 REFERENCE

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

Your Feedback:

We would love to hear from you, please drop us a line.