A Beginner's Guide: Understanding CSS Animation

Introduction

Cascading Style Sheet (CSS) is a style sheet language that's used to design, organize, and beautify our web content. CSS styles our documents that are written in a markup language such as HTML–HyperText Markup Language.

An impressive feature of CSS is that it can be use to creates dynamic and interactive web content. For instance, CSS does the following:

• Indicate an active link.

• Renders dynamic styles on mouse hover.

• Animate Web content and lots more.

The purpose of this article is on CSS animation. We aim to simplify and communicate the concept of CSS animation. What we shall be looking at in this article includes the following:

1. The meaning of CSS Animation.

2. The @keyframe rules.

3. The Attributes of CSS Animation.

4. The shorthand value of CSS animation.

Prerequisite
This article targets beginners and professionals who seek to improve their knowledge of CSS animation. Although you must have a basic understanding of HTML and CSS, as this article does not cover such knowledge. If you're unfamiliar with HTML and CSS, I recommend that you first need to learn and acquaint yourself before moving ahead with this article.

What is CSS Animation?

CSS animation is a feature of CSS that enable developers to create interactive and dynamic web content without the use of extra codes such as JavaScript. JavaScript is the popular language used to create interactive and dynamic web content. Nevertheless, CSS animation creates dynamic and animated web content. For instance, CSS animation can do the following:

• Creates web contents/objects on the motion.

• Renders different colors and background colors of web content.

• Change and update web content styles and lots more.

To implement CSS animation, the @keyframe rule must be applied. Let's look at what the@keyframe rule implies.

What is the @Keyframe Rule?

The @Keyframe rule determines the CSS animation codes. Let's say you want to change the background color of an element using CSS animation, the @keyframe rule is where you'll specify the initial background color and the updated background color. See the example below.

@keyframe example{
  from {background-color: red}
  to {background-color: blue}
}

The @keyframe rule contains attributes that determine CSS animation. From our above example, the @keyframe rule contains 2 attributes–' from' and 'to'.

The 'from' attribute accepts the initial CSS style attributes of your web content to be animated. In our above example, the 'from' attribute contains our initial CSS style attribute e.g. background-color: red.

The ‘to’ attributes accept the new updated CSS style attributes. In our above codes, the 'to' attribute accepts a new attribute for our background color, which is blue. As a result, our background color changes from red to blue. Impressive right? Let's see more examples.

@keyframe example{
  0% {background-color: red}
  100% {background-color: blue}
}

In our above codes, we use percentage attributes instead of the "from" and "to" attributes. Using percentage attributes is another way that the @keyframe rule permits. The percentage attribute starts from 0% and ends at 100%. The 0% accepts the initial CSS style attributes while the 100% accepts the final CSS style attributes.

One major feature of the @keyframe rule is that it can take in as many attributes as possible. See the example below.

@keyframe example{
  0% {background-color: red}
  50% {background-color: green}
  100% {background-color: blue}
}

In our above codes, we use the percentage attributes to update our background color up to three times. We can further increase our attributes to as many as possible.

Take note of the following about the @keyframe rule:

• An animation name must be specified when using @keyframe.

• The @keyframe keyword must first be declared before your animation name.

• The @keyframe rule contains attributes wrapped in between curly braces.

• The @keyframe attributes accept CSS style attributes.

• The CSS style attributes are also wrapped in between curly braces.

Attributes of CSS Animation

The attributes of CSS animation are CSS style attributes/properties that help us to animate our web content. For CSS animation to take effect, CSS style attributes such as animation-name, duration, and amongst others, must be specified. Let's study the below codes.

/*index.html*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>

/*style.css*/

.box{
    width: 100px;
    height: 100px;
    animation-name: example;
    animation-duration: 4s;
}

@keyframe example{
  from {background-color: red}
  to {background-color: blue}
}

In our above codes, we have two documents–index.html and style.css. The index.html file contains markup language and in between the body tag, we have a div tag with a class property–box.

Furthermore, in our style.css file, the box class in our index.html file is referenced. The box class contains some CSS style attributes for our animation.

Therefore, in this section, we shall be looking at CSS style attributes that help us animate our web content.

Animation name

The animation name is a required attribute of CSS animation. The animation name defines the name of the animation that the @keyframe rule indicates. See the codes below.

style.css

.box{
    width: 100px;
    height: 100px;
    animation-name: example;
    animation-duration: 4s;
}

@keyframe example{
  from {background-color: red}
  to {background-color: blue}
}

In our above codes, we have an animation name (example) set as a style attribute to the box class. Next, the @keyframe rule indicates our animation name, which then accepts the animation attributes in curly braces.

Animation duration

The animation duration attribute specifies how long the animation should take place. Note that the default value of animation duration is 0. Hence, if you don't specify the animation duration, the animation will not run. The example below specifies that the animation should run for 4 seconds.

style.css

.box{
    width: 100px;
    height: 100px;
    animation-name: example;
    animation-duration: 4s;
}

@keyframe example{
  from {background-color: red}
  to {background-color: blue}
}

Animation Delay

The animation-delay attribute specifies the duration before the animation should start. The code below specifies that the animation should start after 2 seconds.

style.css

.box{
    width: 100px;
    height: 100px;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

@keyframe example{
  from {background-color: red}
  to {background-color: blue}
}

Note that when the animation-delay attribute contains a negative value, the animation runs as if it has already started.

Animation direction

The animation-direction attribute specifies the direction of the animation. An animation-direction attribute contains any of the following values:

• normal—specifies that the animation will play forward i.e from initial to final attributes

• reverse—specifies that the animation will play backward i.e from final to initial attributes

• alternate—specifies that the animation will play forward first, and then backward

• alternate-reverse—specifies that animation will play in a backward direction first, and then forward

The below example shows the animation will play in the backward direction. That is the background color will first appear in blue and start changing from blue to red.

.box{
    width: 100px;
    height: 100px;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-direction: reverse;
}

@keyframes example{
    0% {background-color: red;}
    50% {background-color: green;}
    100% {background-color: blue;}
}

Animation iteration count

The animation iteration count specifies the number of times that the animation will run.

.box{
    width: 100px;
    height: 100px;
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 0.1s;
    animation-iteration-count: 3;
}

@keyframes example{
    0% {background-color: red; left: 0px;}
    50% {background-color: green; height: 200px; left: 200px;}
    100% {background-color: blue; left: 0px;}
}

The above example runs the animation 3 times. The animation-iteration count also accepts the value of 'infinite', which means that the animation will run forever.

Animation timing function

The animation-timing function specifies the speed of the animation. In this case, the value of the animation timing function determines how fast and slow the animation runs. The animation-timing-function accepts the following values:

• ease—specifies that the animation starts slowly, then fast, and then ends slowly. Note that this is the default value of the animation-timing-function

• linear—specifies that the animation start and ends at the same speed

• ease-in—specifies that the animation speed starts slowly and ends so fast

• ease-out—specifies that the animation speed starts so fast and ends slowly

• ease-in-out—specifies that the animation speed start and end slowly

• cubic-bezier()—allows you to customize the animation speed. Note that the cubic-bezier() function accepts 4 parameters in numbers, separated by a comma.

Below is an example of using the animation-timing-function:

.box{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 0.1s;
    animation-direction: reverse;
    animation-iteration-count: 3;
    animation-timing-function: ease-in;
}

@keyframes example{
    0% {background-color: red; left: 0px;}
    50% {background-color: green; left: 200px;}
    100% {background-color: blue; left: 0px;}
}

Animation fill mode

The animation fill mode specifies the CSS styles for the element before the animation starts and after it has ended. Below are values that the animation-fill-mode attributes accept.

• none—the animation element will not apply any CSS style before and after execution.

• forwards—the animation element retains the CSS style set by the final keyframe attributes when the animation stops execution. Although the final keyframe attributes depend on the animation direction and the animation iteration count.

• backwards—the animation element retains the initial CSS style set by the first keyframe attributes before execution. Although the First keyframe attributes depend on the animation direction and the animation iteration count.

• both—the animation element retains the initial CSS styles before execution and likewise retains the final CSS styles after execution. In other words, the animation follows the rules for both the forwards and the backwards value.

• initial—the animation element retains the initial CSS style before the animation executes and when the animation stops execution.

• inherit—the animation element inherits the CSS style from the parent element styles before the animation executes and when the animation stops execution.

Below is an example of using the animation-fill-mode.

.box{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: yellow;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-direction: reverse;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes example{
    0% {background-color: red; left: 0px;}
    50% {background-color: blue; left: 200px;}
    100% {background-color: green; left: 0px;}
}

CSS Animation Shorthand Property

The CSS animation shorthand property enables us to write our CSS animation style attributes with just one line of code. The examples below indicate CSS animation with and without shorthand properties.

/*example 1*/

.box{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: yellow;
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: ease-in;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}

/*example 2*/

.box{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: yellow;
    animation: example 4s ease-in 1s infinite reverse;
}

The above examples both work the same. Although the second example uses CSS animation shorthand property, hence, has shorter codes than the first example.

Conclusion

CSS animation is a great way to create dynamic and interactive web content without the use of JavaScript codes. This article explains all you need to know to implement CSS animation. For instance, this article explains basic concepts such as the @keyframe rule and attributes of CSS animation.

For you to perfect your skills in CSS animation, I recommend that you should read this article thoroughly and practice regularly.

Congratulations on adding another new CSS skill. Hope you find this article interesting. If yes, follow me on Twitter and LinkedIn as I share more insightful and educational technical content.