Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn, how to create a cute chick walking animation. To create this beautiful animation we need HTML and CSS.
This is a fun tutorial to help you explore and experiment with different CSS properties. It also enables you to practice your animation keyframes.
If you are looking for more such tutorials to practice your CSS skills. You should check out this playlist here. This playlist consists of a bunch of CSS Animation tutorials to help you learn.
Video Tutorial:
If you prefer learning by watching a video tutorial rather than reading this blog post you should check out the video down below. Also, subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us look at the project folder structure.
We create a project folder called – ‘CSS Chick Animation’. Inside this folder, we have two files. These files are index.html and style.css.
The first file is the HTML document while the second file is the stylesheet.
HTML:
We begin with the HTML code. The HTML code creates elements required to create the structure of the chick. We also create the structure for clouds using HTML. Now copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Chick Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="chick">
<div class="body">
<div class="wing"></div>
<div class="beak"></div>
<div class="eye"></div>
<div class="blush"></div>
<div class="feather"></div>
</div>
<div class="left-leg"></div>
<div class="right-leg"></div>
</div>
<div class="shadow"></div>
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="cloud cloud3"></div>
<div class="cloud cloud4"></div>
</div>
</body>
</html>
CSS:
We need to style, shape and position these elements to make it look like a chick. for this we use CSS. We also add animations to the elements using CSS. First copy the code provided to you below and paste it into the stylesheet.
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #49befe;
}
.container {
height: 550px;
width: 100vw;
z-index: 1;
overflow: hidden;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.chick {
position: absolute;
height: 300px;
width: 80px;
margin: auto;
left: 0;
right: 0;
top: 260px;
}
.body {
position: absolute;
height: 65px;
width: 100px;
background-color: #ffec02;
border-radius: 100px 100px 0 0;
top: -2px;
animation: body-walk 0.8s infinite;
}
@keyframes body-walk {
50% {
top: 7px;
}
}
.body:before {
content: "";
position: absolute;
height: 80px;
width: 150px;
background-color: #ffec02;
top: 65px;
right: 0;
border-radius: 15px 0 150px 150px;
}
.wing {
height: 37px;
width: 74px;
background-color: #ffce00;
position: absolute;
top: 55px;
left: -40px;
border-radius: 10px 10px 74px 74px;
transform-origin: right;
animation: wing 1s infinite;
}
@keyframes wing {
50% {
transform: rotate(10deg);
}
}
.beak {
position: absolute;
background-color: #f17c00;
height: 40px;
width: 40px;
border-radius: 5px;
top: 30px;
left: 68px;
transform: skewX(30deg) rotate(-25deg);
z-index: -1;
}
.left-leg,
.right-leg {
height: 50px;
width: 13px;
background-color: #f17c00;
position: absolute;
top: 100px;
left: 35px;
transform-origin: top;
transform: rotate(-45deg);
animation: walk 1s infinite;
z-index: -1;
}
.left-leg:before,
.right-leg:before {
content: "";
position: absolute;
height: 13px;
width: 40px;
background-color: #f17c00;
right: -20px;
top: 50px;
border-radius: 40px;
}
.right-leg {
animation-delay: 0.5s;
}
@keyframes walk {
33.33% {
transform: translateY(20px) rotate(0deg);
}
66.66% {
transform: translate(-25px, 10px) rotate(30deg);
}
}
.eye {
background-color: #1c1c1c;
height: 20px;
width: 20px;
position: absolute;
top: 32px;
left: 65px;
border-radius: 20px;
transform-origin: bottom;
animation: blink 2.5s infinite;
}
@keyframes blink {
30% {
height: 1px;
top: 40px;
}
}
.blush {
background-color: rgba(241, 124, 0, 0.5);
position: absolute;
height: 15px;
width: 15px;
border-radius: 50%;
top: 48px;
left: 46px;
}
.feather {
height: 35px;
width: 12px;
border-radius: 35px;
background-color: #ffec02;
position: absolute;
left: 30px;
top: -20px;
transform: rotate(-15deg);
}
.feather:before {
content: "";
position: absolute;
height: 25px;
width: 12px;
background-color: #ffec02;
top: 5px;
left: 10px;
border-radius: 25px;
transform: rotate(25deg);
}
.shadow {
background-color: #39a4f0;
height: 18px;
width: 110px;
position: absolute;
bottom: 99px;
margin: auto;
left: 0;
right: 0;
z-index: -2;
border-radius: 20px;
animation: shadow 1s infinite;
}
@keyframes shadow {
50% {
transform: scaleX(1.13);
}
}
.cloud {
background-color: #ffffff;
height: 35px;
width: 120px;
border-radius: 120px;
position: absolute;
z-index: -3;
right: -130px;
}
.cloud:before {
position: absolute;
content: "";
background-color: #ffffff;
height: 65px;
width: 65px;
border-radius: 50%;
bottom: 10px;
left: 15px;
}
.cloud:after {
position: absolute;
content: "";
background-color: #ffffff;
height: 45px;
width: 45px;
border-radius: 50%;
bottom: 10px;
right: 10px;
}
.cloud1 {
top: 240px;
animation: cloud 10s 18px infinite linear;
}
.cloud2 {
top: 160px;
animation: cloud 10s infinite linear;
}
.cloud3 {
top: 60px;
animation: cloud 10s 5s infinite linear;
}
.cloud4 {
top: 300px;
animation: cloud 10s 12s infinite linear;
}
@keyframes cloud {
100% {
transform: translateX(calc(-100vw - 130px));
}
}
That’s it for this tutorial. Our cute chick animation is now ready. If you face any issues while creating this code you can download the source code by clicking on the download button below. Also, I would love to hear from you guys o if you have any queries, suggestions or feedback, comment below.
Happy Coding!
