Home/Blog/Programming/Animate CSS code: create a panda animation with HTML & CSS
Home/Blog/Programming/Animate CSS code: create a panda animation with HTML & CSS

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

8 min read
Oct 06, 2020

Become a Software Engineer in Months, Not Years

From your first line of code, to your first day on the job — Educative has you covered. Join 2M+ developers learning in-demand programming skills.

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:



Take your CSS skills to the next level

Learn the practical methods around app theming and get hands-on experience with css-theming.

CSS Theming for Professionals



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.

  • CSS (SCSS)
css
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.


  • CSS (SCSS)
css



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. 

  2. A sprite sheet file for the animation
    3. 

  3. An audio file of your choosing
    4. 

  4. Your HTML and CSS skills
    5. 



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>
    

  1. 

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

    2. 

  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. 

  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. 

  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. 

  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. 

  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. 

  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.
    

    8. 



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.


CSS Theming for Professionals









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

  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. 

  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.
    

    3. 





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.




    

  1. 

    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.
    

    2. 

  2. 

    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.
    

    3. 

  3. 

    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.
    

    4. 

  4. 

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

    5. 



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#



 
Join 2.5 million developers at
Explore the catalog
Free Resources
Learn in-demand tech skills in half the time
PRODUCTS
Mock Interview
New
Courses
Skill Paths
Projects
Assessments
TRENDING TOPICS
Learn to Code
Tech Interview Prep
Generative AI
Data Science
Machine Learning
GitHub Students Scholarship
Early Access Courses
Blind 75
Pricing
For Individuals
Try for Free
Gift a Subscription
CONTRIBUTE
Become an Author
Become an Affiliate
Earn Referral Credits
RESOURCES
Blog
Cheatsheets
Webinars
Answers
ABOUT US
Our Team
Careers
Hiring
Frequently Asked Questions
Contact Us
Press
LEGAL
Privacy Policy
Cookie Policy
Terms of Service
Business Terms of Service
Data Processing Agreement
INTERVIEW PREP COURSES
Grokking the Modern System Design Interview
Grokking the Product Architecture Design Interview
Grokking the Coding Interview Patterns
Machine Learning System Design
Tiktok Streamline Icon: https://streamlinehq.com
Copyright ©2024 Educative, Inc. All rights reserved.
soc2