CSS animatable properties are properties that can gradually change from one value to another, such as size, number, color, or percentage.

CSS animations give you more control than transitions and a wider variety of options.

We have created a list of all of the CSS animatable properties, which you can use to create animations on your website. Each property is demonstrated through a short example.

CSS Animatable Properties List

The following is a list of animatable CSS properties and what they do, with an example for each.

Please open the animation demos in an incognito window in your browser.

background

The background shorthand property can be used to set the page background. This property can take up to 8 values: background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-color.

Some properties can be animated using CSS. A separate list of these properties is available.

background-color

The background-color property helps you set the color of the background of an element. That includes the padding and border, but not 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.

border-spacing

This property defines the distance between the borders of cells in a table.

bottom

This text is explaining how to use the CSS property “top” to vertically position an element. It only affects elements that have the position property set to something other than the default value of “static”.

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.

clip

This allows you to clip an image that is larger than the element that it is contained in. Values include “auto” and “shape”.

color

This defines the color of the text.

column-count

The value “number” divides an element into a specific number of columns. The value “auto” automatically divides an element into columns.

column-rule

This defines the width, style, and color of the rule between columns. It is a shorthand property for: column-rule-width, column-rule-style, and column-rule-color.

columns

This property sets the width and number of columns. It’s a shorthand property for: column-width and column-count.

filter

This allows you to change the visual effects of an element, such as making it blurry or more saturated. You can change the values for blur, brightness, contrast, and grayscale.

flex

The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. The flex property sets the flexible length on flexible items. It’s a shorthand property for the flex-grow, flex-shrink, and flex-basis properties. The second and third parameters (flex-shrink and flex-basis) are optional. The default is 0 1 auto.

font

The order of these values is: This styles the text font and is a shorthand property for: font-style, font-variant, font-weight, font-size/line-height, and font-family. The order of these values is:

grid

This styles the grid layout by setting the shorthand properties for: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.

grid-gap

The size of the gap between rows and columns can be specified using the grid-gap property, which is a shorthand for the grid-row-gap and grid-column-gap properties.

grid-template

This shorthand property sets up the grid template for the rows, columns, and areas.

height

This element’s height is defined by a value that doesn’t include margins, borders, or padding. The value can be auto, length, or percentage.

left

The left CSS property affects the horizontal position of an element.

letter-spacing

This sets the distance between characters in text.

line-height

This sets the height of a line.

margin

This property is used to set the margins for an element. It can be specified using one, two, three, or four values, which correspond to top, right, bottom, and left margins respectively.

max-height

This defines the maximum height of an element.

max-width

This defines the maximum width of an element.

min-height

This defines the minimum height of an element.

min-width

This defines the minimum width of an element.

object-position

This allows you to precisely position an image or video using x/y coordinates in conjunction with object-fit.

opacity

This sets the degree of opacity for an element.

order

The order of a flexible item defines how it will be arranged in relation to other flexible items in the container.

outline

The outline property is a shorthand for the following properties: outline-width, outline-style, and outline-color.

padding

This property adds extra space around an element’s content, between the content and the element’s border. This extra space is known as padding. The padding property is a shorthand property for setting the following individual padding properties all at once: padding-top, padding-right, padding-bottom, and padding-left. In shorthand notation, the values for these four properties can be declared in any order, but must be separated by commas. Up to four values can be declared.

perspective

This dives perspective to 3D-positioned elements.

perspective-origin

The text defines the viewer’s position in relation to a 3D object.

right

This text defines the right edge of a positioned element. This edge affects the horizontal position of the element. This edge has no effect on non-positioned elements.

text-decoration-color

This specifies the color for overlines, underlines, and linethroughs.

text-indent

This indents the first line of a block of text.

text-shadow

This will give the text a shadow effect by adding values for the horizontal and vertical shadow, the blur radius, and the color.

transform

This allows you to apply 2D or 3D effects to an element, as well as other capabilities such as moving, rotating, scaling, or skewing the element.

vertical-align

This defines the vertical alignment on an element.

visibility

This determines the visibility of an element.

width

The following sets the width of an element without margins, borders, or padding.

word-spacing

This defines the white space between words.

z-index

This defines how elements are layered on top of each other. Elements with a greater stack order appear on top of elements with a lower stack order.

CSS Animation Properties 

Before diving into the details, let’s set up the basic CSS:

The animation CSS property allows for the animation of most HTML elements without the use of JavaScript or Flash. The property is currently supported in Webkit browsers such as Safari 4+, Safari for iOS (iOS 2+), Chrome 1+, and more recently, Firefox 5. Browsers that don’t support the property will simply ignore the animation code, so make sure your page doesn’t rely on it!

The technology is still relatively new, so browser vendors require prefixes. So far, the syntax is exactly the same for each browser, with only a prefix change required. In the code examples below, we use the -webkit syntax.

All you need to get some CSS animation happening is to attach an animation to an element in the CSS:

/* This is the animation code. */
@-webkit-keyframes example {
   from { transform: scale(2.0); }
   to   { transform: scale(1.0); }
}

/* This is the element that we apply the animation to. */
div {
   -webkit-animation-name: example;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease; /* ease is the default */
   -webkit-animation-delay: 1s;             /* 0 is the default */
   -webkit-animation-iteration-count: 2;    /* 1 is the default */
   -webkit-animation-direction: alternate;  /* normal is the default */
}

The animation-name is linked to the @keyframes. The code for the animation itself can appear anywhere in the CSS, as long as the element you want to animate can find the relevant animation name. The animation name is linked to the @keyframes.

When assigning the animation to your element, you can also use the shorthand:

div {
-webkit-animation: example 1s ease 1s 2 alternate;
}

We can further reduce the amount of code by not specifying values for all of the properties. Without a value specified, the browser will use the default value.

Applying Principles Of Traditional Animation

I think that Disney did a great job in developing the 12 principles of traditional animation early on. They are documented in the book The Illusion of Life and can be applied to any type of animation. Even if you are not an expert in animation, you can still follow along. We will be working on an example of CSS animation that uses all 12 principles. By doing this, we will make the animation look more realistic.

The two versions of the bouncing ball shown in the video look very different.

This example demonstrates the features of CSS animation.

SQUASH AND STRETCH 

We can apply this squash and stretch effect through a CSS3 property, transform:

@-webkit-keyframes example {
   0% { -webkit-transform: scaleY(1.0); }
   50% { -webkit-transform: scaleY(1.2); }
   100% { -webkit-transform: scaleY(1.0); }
}

This will make the object 1.2 times bigger on the y axis, and then return it to the original size.

We are also using more complex timing for this animation. Instead of just using from and to, we are specifying many actions for our animation using percentages.

That covers the squashing. We can combine transforms together:

50% {
-webkit-transform: translateY(-300px) scaleY(1.2);
}

To view the sample animations, you’ll need to use the latest version of Firefox, Chrome, or Safari. Safari provides the best viewing experience for CSS animation at this time.

Although it still looks bad, this small change is the first step to making the animation more believable.

ANTICIPATION 

The anticipatory movement before the main action creates suspense or a sense of power for the viewer. For example, when someone bends their legs before they jump, it helps the viewer anticipate what will come next. In the case of a bouncing ball, simply adding a shadow beforehand suggests that something is falling from above.

We have created another division for the shadow so that we can animate it separately from the ball.

We create anticipation by not having the ball drop into the scene immediately. We do this by adjusting the percentage timings so that there is no movement between the start point and the first action.

@-webkit-keyframes example {
   0% { -webkit-transform: translateY(-300px) scaleY(1.2); }
   35% { -webkit-transform: translateY(-300px) scaleY(1.2); } /* Same position as 0% */
   65% { -webkit-transform: translateY(0px) scaleY(1.2); }    /* Starts moving after 35% to this position */
   67% { -webkit-transform: translateY(10px) scaleY(0.8); }
   85% { -webkit-transform: translateY(-100px) scaleY(1.2); }
   100% { -webkit-transform: translateY(0px); }
}

Around halfway through the animation, the ball pops onto the stage from off-screen.

You can also use animation-delay to create anticipation:

div {
-webkit-animation-delay: 1s;
}

However, there could be an undesired effect. The animation-delay property ignores any animation code until the specified time. So, if your animation starts in a position different from the element you’re animating, then the object will appear to suddenly jump as soon as the delayed animation starts.

STAGING 

Think about Disney films and how the background artwork is important to the scene. It sets the stage and is half of the magic!

Making sure the stage is set up correctly is important for keeping the audience’s attention focused. Just like in a theater, lighting will be used to highlight the most important area. The stage should also contribute to the illusion. In this example, there is a simple background added to show where the ball will land. This way, the viewer knows that the action will take place in the center, and the scene is not just a bunch of random snow.

FOLLOW-THROUGH AND OVERLAPPING 

This is also known as physics. Follow-through and overlapping are more commonly used in character animation for body movement, such as to show arms swaying as the character drops them or long hair falling. Think of someone with a big stomach turning quickly: their body will turn first, and their bulging gut will follow shortly after.

We need to make sure the physics is correct when the ball is dropped. In the demos above, the ball falls unnaturally, as if gravity isn’t working properly. We want the ball to fall and then bounce back up. But this is done better by following the next principle.

SLOW IN AND OUT 

This is about speeding up and slowing down. Imagine a car speeding along and then stopping. If it stopped instantly, it wouldn’t look realistic. We know that cars take time to slow down, so we would have to animate the car braking and coming to a stop slowly.

The slower a person is going at the top of a swing’s arc, the faster they will go at the bottom.

This is an example of how you can improve the realism of the ball by changing the in and out speeds.

Go Forth And Animate!

CCS animations can provide interaction for your elements without using Flash. Additionally, CCS animations can add excitement to your website and, when used in combination with JavaScript, can provide an alternative way to animate games. If you keep the principles above in mind while creating your animations, your website will be more convincing, enticing, and exciting, resulting in a better experience for users.

Related posts:

How to Migrate to Google Analytics 4: A Step-by-Step Guide Elementor vs Beaver Builder: Which Is the Best WordPress Page Builder? 7 Creative Tweaks For Showing More Value On Your CTA Buttons