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.
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.
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.
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.
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.