Animate CSS code: create a panda animation with HTML & CSS
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
Take your CSS skills to the next level
Learn the practical methods around app theming and get hands-on experience with css-theming.
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-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.
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 finishease: slow start, then fast, end slowlyease-in: slow startease-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 executedforwards: Element will retain the style values set by the last keyframebackwards: Element will get the style values set by the first keyframeboth: 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:
- A text editor
- A sprite sheet file for the animation
- An audio file of your choosing
- 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, therelattribute stands for the relationship, which is a stylesheet for the CSS file.hrefis 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 theplay()function for our audio. -
Next, we add the
<audio>element to get the audio file. Here we give it anid. 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 itsid. -
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.
Take your CSS skills to the next level#
Learn how to develop apps that are theme-aware without scrubbing through videos or documentation. Educative’s text-based courses are easy to skim and feature live coding environments, making learning quick and efficient.
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:hiddento control the main window layout. -
Next, we are going to add some style to our panda. We set it
300pxfrom the top and add the actual image image of the panda. Our panda file has a width of3000px, 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 be250px.
-
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 calledmove_forwardthat will move the image from left to right on the screen. -
Walking_animationwill go through all the 12 images of the panda. To do this, we move thebackground-positionfrom0to3000px, which is the width of the image. -
Move_forwardwill 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-bottomand 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!
Continue reading about web dev and CSS#
Free Resources
