Overview of CSS Animatable Properties

CSS animatable properties play a key role in enhancing visual interactivity and delivering smooth user experiences on modern websites and web applications. This comprehensive tutorial offers a complete, alphabetically arranged reference of all animatable CSS3 properties, along with usage tips and interactive examples. Learn how to harness these properties to craft stunning animations without relying on JavaScript.

What Are CSS Animatable Properties?

  • In CSS language, certain properties are specifically designed to work with transitions and animations.
  • Animatable properties support smooth interpolation between values such as sizes, colors, percentages, and numeric units.
  • Keep in mind that not all CSS3 properties are animatable, and only a select group can animate HTML elements effectively.
  • You can create fluid animations and effects using just CSS, without writing any JavaScript code.

CSS3 Animation Example

Try in CodeLab

Alphabetical Reference

Property Example
aspect-ratio Try
background Try
background-color Try
background-position Try
background-position-x Try
background-position-y Try
background-size Try
block-size Try
border Try
border-bottom Try
border-bottom-color Try
border-end-end-radius Try
border-end-start-radius Try
border-block Try
border-block-color Try
border-block-end-color Try
border-block-end-width Try
border-block-start-color Try
border-block-start-width Try
border-block-width Try
border-bottom-left-radius Try
border-bottom-right-radius Try
border-inline Try
border-inline-color Try
border-inline-end-color Try
border-inline-end-width Try
border-inline-start-color Try
border-inline-start-width Try
border-inline-width Try
border-start-end-radius Try
border-start-start-radius Try
border-bottom-width Try
border-color Try
border-left Try
border-left-color Try
border-left-width Try
border-right Try
border-right-color Try
border-right-width Try
border-spacing Try
border-top Try
border-top-color Try
border-top-left-radius Try
border-top-right-radius Try
border-top-width Try
bottom Try
box-shadow Try
clip Try
color Try
column-count Try
column-gap Try
column-rule Try
column-rule-color Try
column-rule-width Try
column-width Try
columns Try
filter Try
flex Try
flex-basis Try
flex-grow Try
flex-shrink Try
font Try
font-size Try
font-weight Try
grid Try
grid-area Try
grid-auto-columns Try
grid-auto-flow Try
grid-auto-rows Try
grid-column Try
grid-column-end
 Try
grid-column-gap Try
grid-column-start Try
grid-gap Try
grid-row Try
grid-row-end Try
grid-row-gap Try
grid-row-start Try
grid-template Try
grid-template-areas Try
grid-template-columns Try
grid-template-rows Try
height Try
inline-size Try
inset Try
inset-block Try
inset-block-end Try
inset-block-start Try
inset-inline Try
inset-inline-end Try
inset-inline-start Try
left Try
letter-spacing Try
line-height Try
margin Try
margin-block Try
margin-block-end Try
margin-block-start Try
margin-bottom Try
margin-inline Try
margin-inline-end Try
margin-inline-start Try
margin-left Try
margin-right Try
margin-top Try
max-height Try
max-width Try
max-block-size Try
max-inline-size Try
min-block-size Try
min-inline-size Try
min-height Try
min-width Try
object-position Try
offset-anchor Try
offset-distance Try
offset-path Try
offset-rotate Try
opacity Try
order Try
outline Try
outline-color Try
outline-offset Try
outline-width Try
padding Try
padding-block Try
padding-block-end Try
padding-block-start Try
padding-bottom Try
padding-inline Try
padding-inline-end Try
padding-inline-start Try
padding-left Try
padding-right Try
padding-top Try
perspective Try
perspective-origin Try
right Try
transform Try
transform-origin Try
translate Try
vertical-align Try
width Try
word-spacing Try
z-index Try