Animate CSS code: create a panda animation with HTML & CSS
Tags: css, html, webdev, animation
Published: 2020-10-06 20:19:39

#### You can use CSS to create beautiful animations. In this tutorial, we will make keyframe animation using only HTML and CSS. Take your web dev skills to the next level. *This article was written by Pratik Shukla.*

___

Using CSS, we can create beautiful animations of out HTML elements without using JavaScript. You can use the built-in `@keyframe` at-rule, which controls the steps of an animated sequence by defining the style of each keyframes. 

To use keyframes, you simply create a `@keyframes` rule and give it a name. That name is then used as a property to match an animation to its keyframe declaration. 

In this tutorial, we will introduce you to CSS animations and make a keyframe panda animation using only HTML and CSS. 

**Today, we will cover:**
* [Basics of CSS animations](#basics)
* [Overview of Panda animation](#overview)
* [Writing the HTML code](#html)
* [Writing the CSS code](#css)
* [Wrapping up](#wrap-up)

<br>

___


<a name="basics"></a>

## Basics of CSS animations 

In CSS, animation allows us to gradually change the style os an element. We do this first by  specifying **keyframes** for our animation. A keyframe is what holds the styles that each element possesses at a given time. 

Using the `@keyframes` rule, we specify the CSS styles, and the animation will gradually change to the new style. We first have to bind the desired animation to an element.

For example, we could bind our `animation` to the `<div>` element to gradually change the background color from red to yellow. This animation will last for 3 seconds. 


```js
/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 3s;
}
```


The `animation-duration` property defines how long time an animation will take until it's complete. The default value is 0 second, so, if you do not specify this property, the animation will not occur.

We can also use percentages when creating CSS animations. This allows you to use more style changes. Below, see an example where the background-color of the `<div>` element changes when the animation is 30% complete, 50% complete, and 100% complete.

```js
/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  30%  {background-color: orange;}
  50%  {background-color: green;}
  100% {background-color: blue;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
```

<br>

### Properties for CSS animations 

Now that we understand the basics of how CSS properties work with the keyframe at-rule, let's discuss the main properties that can be applied to your animations for more functionality. 

**`animation-name`:** determines the name of the animation

```js
div {
  animation-name: panda;
}
```

<br>

**`animation-delay`:** this property creates a delay for the beginning of your animation

```js
animation-delay: 5s;
```
<br>

**`animation-iteration-count`:** this property define how many times an animation will run

```js
animation-iteration-count: 4;
```

<br>

**`animation-timing-function`:** this property defines the speed curve, for example:
   * `linear`: same speed from start to finish
   * `ease`: slow start, then fast, end slowly 
   * `ease-in`: slow start
   * `ease-out`: slow finish

<br>

**`animation-direction`:** this property determines if the animation will play forwards or backwards

```js
animation-direction: reverse;
```

<br>

**`animation-fill-mode`:** this property determines the style of a target element when the animation is not playing. This is how we override the CSS rule that animations do not alter an element until we play the first keyframe. 
   * `none`: Animation will not apply any styles until executed
   * `forwards`: Element will retain the style values  set by the last keyframe 
   * `backwards`: Element will get the style values set by the first keyframe
   * `both`: Animation extend the animation properties in both directions (forward and backward)

<br>

___


<a name="basics"></a>


## Overview of Panda animation

Now let's apply what we learned about CSS animations and build our own animation from scratch using just CSS and HTML. We will be making a simple animation of a panda walking through a field. If you choose, you can also include music to the animation. Take a look at our final product below. 

<center>


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

</center>


**Here is what we will need to create our animation:**
1) A text editor
2) A sprite sheet file for the animation
3) An audio file of your choosing
4) Your HTML and CSS skills


To create our animation, we will be using a **sprite sheet**. A sprite sheet is a bitmap image file that contains several smaller graphics in a tiled grid arrangement. Take a look at the sprite sheet we will be using for this animation. 


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


Here, we can see that there are 12 different panda images. Once we put them together as an animation, we will have a walking panda animation! To so do, we will be creating **two files**: `Moving_Panda.html` and `Moving_Panda.css`. 

> I’ve added all the required files [here](https://drive.google.com/drive/folders/1rh3PewYBe8BZ5crmGsW5xxl3InpY87Jr?usp=sharing) for you to download.
> 
> You can also view and download code from [GitHub](https://github.com/shuklapratik/Panda_Animation).


___

<a name="html"></a>


## Writing the HTML code

Let's get started with the HTML portion first. Remember: the HTML code is what the CSS animation will alter to create a moving effect. You can add the CSS code in your HTML file, but for neatness, we will make two different files. 

Take a look at the code below and the continue reading for a detailed explanation of each part. 


```js
<html>
<head>
	<title>Panda Walking Animation</title>
	<link rel="stylesheet" href = "Moving_Panda.css">
</head>

<body>
	<a href="#" onclick="play()">

	<audio id="audio" src="https://git.io/JUW4q" loop="loop"></audio>

	<script>
      function play() 
      {
        var audio = document.getElementById("audio");
        audio.play();
      }
    </script>
	
	<div id="panda"></div>
	<div id="street"></div>
	</a>
</body>
</html>
```

1. First, we are going to add the `<html>` tag to represent the root of an HTML document. 

2. Next, we’re going to add the `<head>` tag, which is used to display metadata (any other specific information about the webpage that will not be displayed to the user). Here we are going to set the `<title>` for our html file. 

3. Then we add the `<link>` element to link the CSS file to our HTML file. Here, the `rel` attribute stands for the relationship,  which is a stylesheet for the CSS file. `href` is used to link the external CSS file.

4. Next, we have our main `<body>` element. We write the code that we want to display on the webpage here. First, we add the `<a>` element, which triggers the `play()` function for our audio.

5. Next, we add the `<audio>` element to get the audio file. Here we give it an `id`. Here, we can see that the audio will play in a loop. 

6. Next, we write a script for the `play()` function, which will trigger when the user clicks on the panda. The script will get the audio element by its `id`.

7. Next, we add a division or a section for the panda and after that we are going to add another `<div>` element for the street.

So that’s it. Pretty simple, right? Now, let’s move on to the CSS file.


___

<a name="css"></a>

## Writing the CSS code

Now for the CSS animations! Take a look at the code below and the continue reading for a detailed explanation of each part. 

```js
body
	{
		background: url(https://git.io/JUW4t);
		background-size: cover;
		overflow: hidden;
	}

#panda
	{
		position:relative;
		top:600px;
		background: url(https://git.io/JUW4L); 
		width:250px;
		height:330px;		
		animation:walking_animation 1s steps(12) infinite,move_forward 8s linear infinite;	
	}

@keyframes walking_animation
	{
		0%{background-position:0px;}
		100%{background-position:3000px;}
	}

@keyframes move_forward
	{
		0%{transform:translateX(-100px);}
		100%{transform:translateX(1366px);}
	}

#street
	{
		position:relative;
		top:600px;
		border-bottom:5px groove green;
	}
```

1. First, we are going to add the background image for the body. It will cover the whole screen. Then, we addd the `overflow:hidden` to control the main window layout. 

2. Next, we are going to add some style to our panda. We set it `300px` from the top and add the actual image image of the panda. Our panda file has a width of `3000px`, but we just want to display the 1st image out of the 12 images. To do that, we alter width and height. The height for the first panda will be `330px`. For the width, we divide it into 12 equal parts for each frame, so, the width will be `250px`. 

3. Now we add animations. The first animation is called `Walking_animation`. It will go through all the 12 images of the panda, but it won’t move from its original position. To make it move on the x-axis, we add add another animation called `move_forward` that will move the image from left to right on the screen.

4. `Walking_animation` will go through all the 12 images of the panda. To do this, we move the `background-position` from `0` to `3000px`, which is the width of the image. 

4. `Move_forward` will move the panda on the x-axis using the transform property. We’ll spawn the panda at `-100px`, and it will go to the end of the screen.

5. Now we add the street below the panda. To do that, we’ll simply add the `border-bottom` and then set the position.

Hooray! You should now have a functioning Panda animation. Take a look at the complete code below and click **"Run"** to see it in action on the Output tab.



___

<a name="wrap-up"></a>

<br>

## What to learn next

Congrats! You learned how to animate using CSS and HTML. Your web dev skills are now even more advanced, and you're ready to tackle new topics. If you want to continue advancing your CSS skills, you should consider learning about **theming** for web applications.

Educative's course **[CSS Theming. for Professionals](https://www.educative.io/courses/css-theming-for-professionals)** teaches you how to develop apps that are theme aware. You will get hands-on with the practical methods around theming. By the end, you’ll be able to create stunning apps that are highly customizable. 

If you're new to web development and CSS, consider starting with the course **[Web Development: Unraveling HTML, CSS, and JavaScript](https://www.educative.io/courses/web-development-unraveling-html-css-js)** for with a short tour of HTML, CSS, and JavaScript. 

*Happy learning!*

<br>

### Continue reading about web dev and CSS
* [CSS Interview Questions: Cheat Sheet for Front-end Interviews](https://www.educative.io/blog/css-interview-questions-cheat-sheet)
* [SASS Best Practices: 9 frontend tips for CSS preprocessors](https://www.educative.io/blog/sass-best-practices-frontend-coding-tips)
* [HTML Beginner's Tutorial: build a webpage from scratch with HTML
](https://www.educative.io/blog/html-beginners-tutorial-build-from-scratch)