Amanda Fawcett for Educative

Posted on Oct 6, 2020 • Originally published at educative.io

Animate CSS code: create a panda animation with HTML & CSS

#css #html #webdev #animation

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
Overview of Panda animation
Writing the HTML code
Writing the CSS code
Wrapping up

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.

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

/* 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;
}

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

div {
  animation-name: panda;
}

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

animation-delay: 5s;

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

animation-iteration-count: 4;

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

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

animation-direction: reverse;

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)

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.

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.

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 for you to download.

You can also view and download code from GitHub.

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.

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

First, we are going to add the <html> tag to represent the root of an HTML document.
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.
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.
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.
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.
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.
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.

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.

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;
    }

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

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 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 for with a short tour of HTML, CSS, and JavaScript.

Happy learning!