Web Animations

Introduction

Animations play an important role in our day to day internet surfing. They make the online loading experience more entertaining for the users and develops interests among them.

They are a powerful tool and are quite effective in making the online websites more interactive and engaging for the visitors.

"Animation is the art of bringing life to images and graphical objects"

What is Animation?

"A method in which pictures are manipulated to appear as moving images"

In this blog, I'll be focusing purely on CSS Animations. So let's get started!

CSS Animation

Elements in web page can be shifted, rotated and transformed using CSS Animations. They can be moved across the page and interacted in all sorts of interesting ways.

In order to develop a better understanding of CSS Animations, let's understand what keyframes are :)

Keyframes

In animation, "A keyframe is a drawing that defines the starting and ending point of any smooth transition."

Let's see how we can implement a decent animation using keyframes, in an example below:

For that we'll be needing:

• A static svg image

• and... a bit of css xD

The svg image is divided into smaller parts and each part is grouped and given a specific id which will be later used in CSS.

Now here's how we'll modify the code to make our asset move the way we want!

We'll be creating separate keyframes for the transition and movement of different parts:

1. Barbell

The following code will aid in the vertical motion of the barbell.

@keyframes barbell {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(42%);
  }
}

This is then integrated to the corresponding part in svg by assigning the keyframe to the animation attribute in #Barbell selector.

#Barbell {
  width: 700px;
  height: auto;
  margin: 0;
  padding: 0;
  animation: barbell 1s ease-in-out 6 alternate;
  transform-origin: center;
  transform-box: fill-box;
}

2. Arms

This one's a bit tricky, so fasten your seat belts xD
To illustrate the bending motion of the arms we further subdivided it to arm & forearm pair.

Forearm

@keyframes foreArmLeft {
  from {
    transform: rotate(0deg) translateY(0%) translateX(0%) scaleY(1);
  }
  to {
    transform: rotate(8deg) translateY(35%) translateX(-63%) scaleY(0.65);
  }
}

The translate(35%) adds a bit of vertical motion to the forearm to depict the lifting of barbell while the rotate(8deg) illustrates the bending motion. This is then integrated to the forearm selector #ForeArmLeft as:

#ForeArmLeft {
  animation: foreArmLeft 1s ease-in-out 6 alternate;
  transform-origin: bottom;
  transform-box: fill-box;
}

Upper Arm

The code below aids in moving the upper arm of the brain diagonally.

@keyframes upperArmLeft{
  from {
    transform: translateY(0%) translateX(0%);
  }
  to {
    transform: translateY(270%) translateX(-60%);
  }
}

3. Face

The following 2 keyframes contribute to the transition of happy and sad moods of the brain.

@keyframes faceHappy{
  from{
    opacity: 1;
    transform: translateY(0%);
  }
  to{
    opacity: 0;
    transform: translateY(3%);
  }
}

@keyframes faceSad{
  from{
    opacity: 0;
    transform: translateY(0%);
  }
  to{
    opacity: 1;
    transform: translateY(3%);
  }
}

4. Body

The slight vertical motion of the body representing the brain's efforts to lift the barbell is created with the following piece of code:

@keyframes body {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(5%);
  }
}

Voila! Our animation is now ready... Let's have a look!

Thanks for reading!

Comments

[Naresh Poonia]

Great Post, I would like to do something like this someday

[Hamza Shahab]

It's fairly easy, I am sure you'll love it!!

[Victor A. Barzana]

Great post, how did you create the svg? Which program?

[syntaxhacker]

vector graphics software like Adobe Illustrator or affinity designer

[Hamza Shahab]

Illustrator is a fun tool to begin with, if you're into vector art ❣️

[Victor A. Barzana]

Nice, thank you Hamza!!!

[paul vincent]

But where is the finished animation? Is there a link I'm not seeing?