Create a moving BOT illustration using CSS
Tags: css, animation, illustration, html
Published: 2020-05-04 10:46:39

Creating illustrations in CSS is like a hobby with perks :art: . I learned to create illustrations using CSS a few weeks earlier. So I put my skills in creating a moving bot illustration. 

![Moving Bot](https://dev-to-uploads.s3.amazonaws.com/i/bfig94uwpurj1lza0wrx.gif)


**Requirements:**
   - HTML
   - CSS

Let's Start :checkered_flag:

## HTML structure:
```html
   <div class="container">
       <div class="bot">
           <div class="bot_head">
               <div class="left_eye"></div>
               <div class="right_eye"></div>
           </div>
           <div class="stomach"></div>
       </div>
   </div>
```
**.container** is to wrap the whole screen

**.bot** is to wrap the bot, it will be used to set the maximum width and height of the bot

**.bot_head** is for the head of the bot

**.left_eye** & **.right_eye** is for the eyes of the bot

**.stomach** is for the lower part of the bot

## Apply CSS:

Set width,height 100% of both html & body
```css
   html,
   body{
      width:100%;
      height:100%;
      padding:0px;
      margin:0px;
      }
```

Set ``` position: absolute ``` to all tags so that left, right, bottom, top attributes can be used.
```css
    *{
      position:absolute;
    }

    *:after,*:before{
      position:absolute;
      content:'';
    }
```

Apply flexbox in .container in order to justify the bot at the centre of the screen.
```css
   .container{
      width:100%;
      height:100%;
      display:flex;
      justify-content:center;
      align-items:center;
      }
```

set custom width & height for the bot container which is .bot, use flexbox to make its content justify & align centre.
```css
   .bot{
       width:250px;
       height:400px;
       display:flex;
       align-items:center;
       flex-direction:column;
       }
```

now we can finally start with styling bot's body parts. :sparkles:

## BotHead:
border-radius will be useful to create the head of bot
```css
   .bot_head{
       background:#66e366;
       width:150px;
       height:110px;
       top:10%;
       border-radius:30px 30px 30px 10px;
}
```

border-radius: top-left top-right bottom-right bottom-left

The bot_head will look like this

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

In order to create a pointed triangle in the bot head, which will make it look like a chatbot head, we will use the :after pseudo-elements of CSS .

```css
  .bot_head:after{
       width:40px;
       height:40px;
       bottom:-17px;
       left:5px;
       background:inherit;
       clip-path: polygon(48% 100%, 0 0, 100% 0);
     }
```
The **clip-path** CSS property creates a clipping region that sets what part of an element should be shown .
You can use [BennettFeely](https://bennettfeely.com/clippy/) to generate clip-path.

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


## Eyes:
For the Eyes, we will create two circles both for left and right eyes
```css
   .left_eye{
         width:30px;
         height:30px;
         background:white;
         border-radius:50%;
         top:30px;
         left:30px;
         }
    .right_eye{
         width:30px;
         height:30px;
         background:white;
         border-radius:50%;
         top:30px;
         right:30px;
     }
```
**left:30px** will move the .left_eye 30px from the left.

**right:30px** will move the .right_eye 30px from right. 

we have written similar code for both left_eye and right_eye in order to use separate left & right CSS properties. However, using [sass](https://sass-lang.com/) can reduce the repetition but we are not using it in this article.

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

## Stomach Part:

create a big circle and move it 45% from top
```css
   .stomach{
      width:150px;
      height:150px;
      border-radius:50%;
      top:45%;
      background:#43bfe6;
     }
```
Awesome we have our bot ready.

![stomach](https://dev-to-uploads.s3.amazonaws.com/i/0w4sycmy3rnxn76eytpt.png)

## Animation:

Definition by [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) docs: 
''CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.''

The CSS style properties & keyframes are used in order to create animations.

## How to create Keyframes:
```css
@keyframes AnimationName{
     0%{
        /* some css property */
        left: 20px;
      },
     50%{
        left:40px;
      }
     100%{
        /* some css property */
        left: 0px;
        }
}
```
here AnimationName can be any name you prefer to use like jump, bounce, slide etc.
we are telling keyframe that at 0% of animation make the element shift to left 20px, at 50% 40px to the left and at  100% of animation return back to 0px from left.

## How to use Keyframes:

CSS **animation** property is used to apply the keyframes.

Syntax:
```
animation: animation-name animation-duration animation-timing-function animation-iteration-count;
```

**animation-name:** identifier for the keyframe.

**animation-duration:** how long the animation should take to finish.

**animation-timing-function:** It specifies the speed curve of an animation.

**animation-iteration-count:** how many times the animation should iterate.

You can read in detail about animation at [css-tricks](https://css-tricks.com/almanac/properties/a/animation/)

let's apply the animation in our cute bot.

## create keyframes for the stomach:
```css
   @keyframes stomach_move{
    0%,50%,100%{
       left:15%; /* we can set same style for multiple percentage */
     }
    25%{
      left:-35%;
     }
    75%{
      left:100%;
     }
   }
```
At **0%, 50% & 100%** of the animation the bot will be at *15%(towards right side)* from the left,it is the starting and ending position of animation.
At **25%** the bot will move **-35%(towards left side)** from the left.
At **75%** the bot will move **100%(towards right side)** from the left.

In `left:100%` the 100% is the complete width of the **.bot** class which is 250px.


Apply **stomach_move** keyframe in **.stomach** class under animation property
```css
   .stomach{
       width:150px;
       height:150px;
       border-radius:50%;
       top:45%; 
       background:#43bfe6;
       animation: stomach_move 3s ease infinite;
    }
```
![Stomach move](https://dev-to-uploads.s3.amazonaws.com/i/97asht5xp6r0aets8wjn.gif)

The stomach is moving left & right. 
The **animation-iteration-count** is set to infinite which will make the animation iterate infinitely.

## create keyframes for the bot_head:
```css
   @keyframes bot_head_motion{
     0%,50%,100%{
       left:25%;
     }
     25%{
      left:-45%;
      transform:rotate(-20deg)
     }
     75%{
      left:90%;
      transform:rotate(20deg)
      }
  }
```
''The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. ''
At 25% the bot head will rotate -20deg and at 75% it will rotate by 20deg.

Apply **bot_head_motion** keyframe in .bot_head class
```css
      .bot_head{
        background:#66e366;
        width:150px;
        height:110px;
        top:10%;
        border-radius:30px 30px 30px 10px;
        animation: bot_head_motion 3s ease infinite;
}
```

and tada :tada: the bot is moving :smile:

![Moving Bot](https://dev-to-uploads.s3.amazonaws.com/i/bfig94uwpurj1lza0wrx.gif)

Here is my codepen:
{% codepen https://codepen.io/gilbishkosma/pen/dyYZZrL %}


ThankYou for reading this :smile:
Feel free to customize the animations on your own.