When CSS property values are set to change over a specified period of time, the element is animated on the page. Therefore, CSS animatable properties are properties that can gradually change from one value to another, such as size, number, color, or percentage.

CSS animations are just like transitions, only with better control and a wider variety of options.
We've compiled an A-Z list of CSS animatable properties along with a demo for each. Let's look at the various animations you can create with CSS on your site.
CSS Animatable Properties List
Here's a list of all the properties you can animate with CSS, what they do, and an example of each.
Note: Open the animation demos in in the incognito window of your browser.
background
This is shorthand for the property used for setting the page background. It lets you display up to eight properties: background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-color.
Some of these properties are animatable, which we've shared separately in more detail in this list of CSS animatable properties.
Animation demo
background-color
This property helps you set the background color of an element, meaning the space occupied by an element, including the padding and border but excluding the margin.
Color values can be specified in different ways:
- Hexadecimal in the format of #rrggbb
- RGB in the format of rgb (red, green, blue)
- RGBA in the format of rgba (red, green, blue, alpha)
- HSL in the format of hsl (hue, saturation, lightness)
- HSLA in the format of hsla (hue, saturation, lightness, alpha)
- Predefined. The CSS and HTML specification includes 140 predefined color names you can use.
- The currentcolor keyword can be used to represent the value of a color property. When used, elements that don't have a property value can inherit the color by default.

Image Source
background-position
This is used to set the starting position of a background image. Values include left top, left center, left bottom, right top, right center, right bottom, center top, center center, and center bottom.
Animation demo
background-size
This is used to set the size of the background image. Values include auto, length, percentage, cover, and contain.
Animation demo
border
This helps you style the borders of an element. It's a shorthand property for: border-width, border-style, and border-color. When the border isn't specified, the text color is applied.

Image Source
border-bottom
This is used to style the bottom border. It's a shorthand property for: border-bottom-width, border-bottom-style, and border-bottom-color.
Animation demo
border-bottom-color
This sets the color of the bottom border of an element. Note that you need to have a border before you can apply color to it. Thus, always define the border-style or border-bottom-style before border-bottom-color.
Animation demo
border-bottom-left-radius
This adds rounded borders to the corners of the element. It lets you define the radius of the bottom left corner. Values include length and percentage.
Animation demo
border-bottom-right-radius
This defines the radius of the bottom right corner.
Animation demo
border-bottom-width
This sets the width for the bottom border. It should be defined after the border is created, after border-style or border-bottom-style properties. Values include medium, thin, thick, and length.
Animation demo
border-color
This sets the border color. It can be defined by up to four values in the format of border-color: color1 color2 color3 color4;
If it has four values, each side of the border gets the specified color.
If it has three values, the top and bottom borders get the first and last specified color, while the right and left borders are styled with the middle color.
If it has two values, the top and bottom colors take the first, while the right and left borders take the second color.
If it has only one value, all borders have the specified color.
Image Source
border-left
This styles the left border. It's a shorthand property for: border-left-width, border-left-style, and border-left-color.
Animation demo
border-left-color
This sets the color of the left border. Values include color and transparency.
Animation demo
border-left-width
This sets the width for the left border. Values include medium, thin, thick, and length.
Animation demo
border-right
This styles the right border. It's a shorthand property for: border-right-width, border-right-style, and border-right-color.
Animation demo
border-right-color
This sets the border for the right color.
Animation demo
border-right-width
This sets the width for the right border.
Animation demo
border-spacing
This defines the distance between borders of cells in a table.
Image Source
border-top
This styles the top border. It's a shorthand property for: border-top-width, border-top-style, and border-top-color.
Animation demo
border-top-color
This sets the color of the top border.
Animation demo
border-top-left-radius
This defines the top left corner radius.
Animation demo
border-top-right-radius
This defines the top right corner radius.
Animation demo
border-top-width
This sets the width of the top border.
Animation demo
bottom
This is used to position an element vertically. It only affects positioned elements.
When the position is:
- position: absolute; or position: fixed; the bottom edge of the element is set to a unit above or below the bottom edge of the nearest positioned ancestor.
- position: relative; the bottom edge moves above or below its normal position.
- position: sticky; the bottom property behaves like it's in a relative or fixed position when the element is inside and outside a viewport, respectively.
- position:static; the property has no effect.

Image Source
box-shadow
This adds shadows to an element. Values include none, horizontal offset, vertical offset, blur, spread, and color.
Animation demo
clip
This lets you clip an image that's larger than its containing element. Values include auto and shape.
Animation demo
color
This defines the color of the text.
Image Source
column-count
This divides an element into columns. Values include number and auto.
Animation demo
column-gap
This sets the gap between columns. Values include length and normal.
Animation demo
column-rule
This defines the width, style, and color of the rule between columns. It's a shorthand property for: column-rule-width, column-rule-style, and column-rule-color.

Image Source
column-rule-color
This sets the color of the rule between columns.
Animation demo
column-rule-width
This sets the width of the rule between columns. Values include medium, thin, thick, and length.
Animation demo
column-width
This sets the column width. Values include auto and length.
Animation demo
columns
This sets the column width and count. It's a shorthand property for: column-width and column-count.
Animation demo
filter
This sets visual effects to an element, such as blur and saturation. Values include blur, brightness, contrast, and grayscale.
Animation demo
flex
This sets the flexible length on flexible items. It's a shorthand property for: flex-grow, flex-shrink, and flex-basis.

Image Source
flex-basis
This defines the initial length of a flexible item. Values include: number and auto.
Animation demo
flex-grow
This specifies how much an item will grow in comparison to other flexible items in the container.
Animation demo
flex-shrink
This specifies how much an item will shrink compared to the other flexible items in the container.
Animation demo
font
This styles the text font. It's a shorthand property for: font-style, font-variant, font-weight, font-size/line-height, and font-family.
Animation demo
font-size
This sets the size of the font. Values include medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, length, and percentage.

Image Source
font-size-adjust
This lets you control the size of the font displayed by the browser in case the first selected font isn't available.
Animation demo
font-stretch
This lets you make the text narrower or wider. Values include normal, expanded, and condensed.
Animation demo
font-weight
This sets the thinness or thickness of the font. Values include normal, bold, bolder, lighter, and number.
Animation demo
grid
This styles the grid layout. It's a shorthand property for: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.

Image Source
grid-area
This defines the size and location of an item in a grid layout. It's a shorthand property for: grid-row-start, grid-column-start, grid-row-end, and grid-column-end.
Animation demo
grid-auto-columns
This sets the size for columns in a grid container. It affects columns that don't have a specified size. Values include length, percentage, auto, and fit-content.
Animation demo
grid-auto-flow
This determines how auto-placed items are added into the grid. Values include row, column, dense, row-dense, and column-dense.
Animation demo
grid-auto-rows
This sets the size of rows. Values include auto, max-content, min-content, and length.
Animation demo
grid-column
This defines the size and location of a grid item. It's a shorthand property for: grid-column-start and grid-column-end.
Animation demo
grid-column-end
This defines the number of columns a grid item will span. Values include auto, span, and column-line.
Animation demo
grid-column-gap
This sets the size of the gap between columns.
Animation demo
grid-column-start
This specifies the column-line on which the grid item will start.
Animation demo
grid-gap
This specifies the size of the gap between rows and columns. It's a shorthand property for: grid-row-gap and grid-column-gap.
Animation demo
grid-row
This sets the size and location of a grid item. It's a shorthand property for: grid-row-start and grid-row-end.
Animation demo
grid-row-end
This defines the number of rows a grid item will span.
Animation demo
grid-row-gap
This sets the gap between rows.
Animation demo
grid-row-start
This determines which row-line the grid item will start.
Animation demo
grid-template
This sets up the grid template. It's a shorthand property for: grid-template-rows, grid-template-columns, and grid-template-areas.

Image Source
grid-template-areas
This specifies the areas inside the grid layout.
Animation demo
grid-template-columns
This defines the number and size of columns in a layout.
Animation demo
grid-template-rows
This defines the number and size of rows in a layout.
Animation demo
height
This defines the height of an element. This height doesn't include margins, borders, and padding. Values include auto, length, and percentage.
Animation demo
left
This sets the left edge of positioned elements. It affects the horizontal position of an element.
Animation demo
letter-spacing
This sets the distance between characters in text.
Animation demo
line-height
This sets the height of a line.
Animation demo
margin
This sets the margins for an element. It's a shorthand property for: margin-top, margin-right, margin-bottom, and margin-left. The margin can be specified by four, three, two, or one value.

Image Source
margin-bottom
This sets the bottom margin of an element.
Animation demo
margin-left
This sets the left margin of an element.
Animation demo
margin-right
This sets the right margin of an element.
Animation demo
margin-top
This sets the top margin of an element.
Animation demo
max-height
This defines the maximum height of an element.
Animation demo
max-width
This defines the maximum width of an element.
Animation demo
min-height
This defines the minimum height of an element.
Animation demo
min-width
This defines the minimum width of an element.

Image Source
object-position
This works in conjunction with object-fit to define the position of an <img> or <video> inside its own content box using x/y coordinates.
Animation demo
opacity
This sets the degree of opacity for an element.
Animation demo
order
This defines the order of a flexible item relative to other flexible items in the container.
Animation demo
outline
This sets the outline around an element. It's a shorthand property for: outline-width, outline-style, and outline-color.

Image Source
outline-color
This defines the color of an outline.
Animation demo
outline-offset
This adds a space between an outline and the border of an element.
Animation demo
outline-width
This sets the width of an outline.
Animation demo
padding
This adds padding to an element. This is the space between the content and the border. It's a shorthand property for: padding-top, padding-right, padding-bottom, and padding-left. It can have one to four values.

Image Source
padding-bottom
This defines the bottom padding of an element.
Animation demo
padding-left
This defines the left padding of an element.
Animation demo
padding-right
This defines the right padding of an element.
Animation demo
padding-top
This defines the top padding of an element.
Animation demo
perspective
This dives perspective to 3D-positioned elements.
Animation demo
perspective-origin
This defines the position of the viewer relative to the 3D object.

Image Source
right
This defines the right edge of a positioned element. It affects the horizontal position and has no effect on non-positioned elements.
Animation demo
text-decoration-color
This specifies the color for overlines, underlines, and linethroughs.
Animation demo
text-indent
This sets the indentation of the first line in a block of text.
Animation demo
text-shadow
This adds shadow to text. Values include horizontal shadow, vertical shadow, blur radius, and color.

Image Source
top
This defines the top edge of a positioned element. It affects the vertical position and has no effect on non-positioned elements.
Animation demo
transform
This applies 2D or 3D effects to an element. You can move, rotate, scale, or skew an element alongside other capabilities.
Animation demo
transform-origin
This lets you change the position of a transformed element.
Animation demo
vertical-align
This defines the vertical alignment on an element.

Image Source
visibility
This determines the visibility of an element.
Animation demo
width
This sets the width of an element. This doesn't include margins, borders, or padding.
Animation demo
word-spacing
This defines the white space between words.
Animation demo
z-index
This sets an element's stack order. Greater stack order elements appear before lower stack order elements.

Image Source
CSS Animatable Properties (A - Z)
There you have it! A list of all the animatable properties within CSS. These will help make your website and presentations more lively and interactive.
