CSS Animation for Beginners

The human brain is hardwired to pay attention to moving objects. Because of this natural reflex to notice movement, adding animation to your website or app is a powerful way to draw users attention to important areas of your product and add interest to your interface.

When done well, animations can add valuable interaction and feedback, as well as enhance the emotional experience, bring delight, and add personality to your interface. In fact, to animate means to bring to life.

The Building Blocks of Animations

CSS animations are made up of two basic building blocks.

  1. Keyframes – define the stages and styles of the animation.
  1. Animation Properties – assign the @keyframes to a specific CSS element and define howit is animated.

Let’s look at each individually.

Building Block #1: Keyframes

Keyframes are the foundation of CSS animations. They define what the animation looks like at each stage of the animation timeline. Each @keyframes is composed of:

Name of the animation: A name that describes the animation, for example, bounceIn.

  • Stages of the animation: Each stage of the animation is represented as a percentage. 0% represents the beginning state of the animation. 100% represents the ending state of the animation. Multiple intermediate states can be added in between.
  • CSS Properties: The CSS properties defined for each stage of the animation timeline.

Let’s take a look at a simple @keyframes I’ve named “bounceIn”. This @keyframes has three stages. At the first stage (0%), the element is at opacity 0 and scaled down to 10 percent of its default size, using CSS transform scale. At the second stage (60%) the element fades in to full opacity and grows to 120 percent of its default size. At the final stage(100%), it scales down slightly and returns to its default size.

For example:-

The @keyframes are added to your main CSS file.

@keyframes bounceIn {

0% {

transform: scale(0.1);

opacity: 0;

}

60% {

transform: scale(1.2);

opacity: 1;

}

100% {

transform: scale(1);

}

}

Building Block #2: Animation Properties

Once the @keyframes are defined, the animation properties must be added in order for your animation to function.

Animation properties do two things:

  1. They assign the @keyframesto the elements that you want to animate.

+

  1. They define howit is animated.

The animation properties are added to the CSS selectors (or elements) that you want to animate. You must add the following two animation properties for the animation to take effect:

  • animation-name: The name of the animation, defined in the @keyframes.
  • animation-duration: The duration of the animation, in seconds (e.g., 5s) or milliseconds (e.g., 200ms).

Continuing with the above bounceIn example, we’ll add animation-name andanimation-duration to the div that we want to animate.

div {

animation-duration: 2s;

animation-name: bounceIn;

}

Shorthand syntax:

div {

animation: bounceIn 2s;

}

 

Leave a Reply

Your email address will not be published. Required fields are marked *