Learn CSS animation basics in 5 min reading.

If you are a CSS/HTML beginner and want to learn about CSS animations but you feel lost inside this huge amount of documentation and tutorials all around the web, this post is for you.

In this post, we will explore in a brief but yet efficient way, the basic concepts of animation with CSS/HTML and learn how to create animation with CSS/HTML only.

I- The behavior of an animated object:

In CSS, Animation defines the changes of an object throughout time. We can list these changes in 3 categories:
1- The motion: the object position changes in 3-dimensional space. We may see it as a composition of 3 basic movements, such as Translation along the X, Y, and Z, and rotation.
2- Scale up, scale down: the object size changes over time.
3- Appearance: how the object attributes changes occurred throughout time. These attributes are related to the aspects of an object such as color, opacity, shape…

The key strategy for creating good and complex animations is to study the behavior of the animated objects and to dissect it into elementary movements.

II- How to express animation in CSS:

The main keywords that allow us to express animation in CSS are: “transition”, “transform”, “animation” and “@keyframes”.

Before starting to create some fancy animated objects with CSS, let’s first understand the meaning of these keywords and their syntax.

Manipulate your object in space with “transform” keyword:

The “transform” property defines the transformation of your object in 3D space. It allows you to manipulate the motion of your animated-object in 3-dimensional space.

This property accepts many values related to the object motion and its size changes. Those values result from parameterizable transformation functions such as translation, rotation, scaling.

  .animated_object {
       transform: transformation-function(parameter);
  }

In the following CodePen, you can experiment the behavior of a

with “transform” property and its functions: translateX() translateY() translateZ() , rotateX(), rotateY() and rotateZ().

Add time dimension with “transition” keyword:

The “transition” property is a short-hand keyword that allows us to articulate the transformation timing of our object. It accepts, as value, a combination of :

• Transition property: the properties to which we chose to apply the transition in time;
• Transition duration: the time of the transition duration;
• Transition timing function: it indicates how the acceleration changes throughout the transformation ;
• Transition delay: it indicates when the transition should start.

 .animated_object {
   transition: Transition-property duration timing-function delay;
  }

Example:

 .animated_object {
    transition: all 0.5s ease 0.2s;
  }

The following Codepen, developed by Jhey, displays the most used transition-timing functions.

Compose your object motion with “animation” and “@keyframes” keywords:

@keyframes is a powerful CSS rule that allows you to compose your animation. It instructs step by step, the behavior of your animated object. You can see it as a pattern to create complex animations.

How do we use @keyframes?

First, we need to set up the rule using this code:

 @keyframes my-animation {

 /* From The status of the object at the binging of the animation*/  
    from  { 
            property1 : value;
            property2 : value;
            ...
      }
 /* To The status of the object at the end of the animation*/ 
    to   {
            property1 : new-value;
            property2 : new-value;
            ...
      }
 }

If you need your animation pattern to be more specific and detailed, you may want to use the “%” notation. It indicates the changes to implement at specific levels of the animation progress:

 @keyframes my-animation {

   /* The status of the object at the binging of the animation*/ 
   0% {          
           property1 : value;
           property2 : value;
           ...
       }

   /* The status of the object when the animation is at 40% of its  progress*/ 
    40% {
          property1 : new value;
          property2 : new value;
           ...       
        }

   ...

 /* The status of the object at the end of the animation*/
   100% {
          property1 : new value;
          property2 : new value;
           ...
     }
 }

Now you have created your animation pattern, you need to set up the time function of your animation and implement it with the property “animation”:

 .animated_object {  
   animation: my-animation duration timing-function delay;
 }

Conclusion:

Animations bring Glamour and Fanciness to your web-page. However, it should be used with moderation and should be well adapted to the user experience and the app design.
Remember! You don’t want to make a kitschy 90’s look-alike web pages unless you are a vintage amateur.

References:
Css-tricks | W3schools | W3schools | Jhey codePen | Gifs from giphy | Images from Pexel