Web Animations
Tags: css, html, react, animations
Published: 2020-08-27 08:39:26

# 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y16kos6kwbiq7xbt5ydm.png)

* 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qk0ztqrlnq09s0u9uiyy.png)

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!

{% codepen https://codepen.io/hamzashahab1610-the-decoder/pen/ExKmZzJ %}

Thanks for reading!