Video Tutorial:
In case you prefer to code along with me, you can check out the video tutorial here down below.
HTML:
Let us first create the project folder structure required for this tutorial. We start by creating a folder called – Cat Animation. Within this folder, we have two files. The first is index.html and, the second is style.css. They are the HTML file and the stylesheet respectively.
We begin with the HTML code. First, copy the code provided below and paste it into your HTML file.
We first need to create a basic layout of divs that will be further styled and animated. The HTML consists of the main div with a class name container. Within the container, we have a div with a class name window. The window div comprises mountain-1, mountain-2, kitty, moon and star.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cat Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="window">
<div class="mountain-1"></div>
<div class="mountain-2"></div>
<div class="kitty">
<div class="ear"></div>
</div>
<div class="moon"></div>
<div class="star"></div>
</div>
</div>
</body>
</html>
CSS:
Now to style these divs into required shapes, we use CSS. Firstly copy the code below and paste it into your stylesheet. If you don’t know how to create various shapes using CSS, check out this tutorial here.
After shaping and positioning the divs, our CSS art is ready. Now to add animation to this art we use animations and keyframes. We name the animation as tail and set the animation duration to 4 seconds. We also set the transform-origin to the top.
At 50% of keyframes, the tail rotates by 10deg. This creates the effect of a wagging tail. To add the final touch we add twinkle animation to the stars. At 50% of keyframes duration, we reduce the opacity of the star by 40%.
body {
background-color: #c9533e;
padding: 0;
margin: 0;
}
.container {
height: 530px;
width: 350px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.window {
width: 250px;
height: 390px;
background-color: #29467a;
outline: 12px solid #2d2623;
border-left: 5px solid #439abf;
border-right: 5px solid #439abf;
position: relative;
top: 20px;
left: 45px;
}
.window:before,
.window:after {
content: "";
position: absolute;
background: linear-gradient(#439abf 50%, #2d2623 50%);
}
.window:after {
height: 15px;
width: 260px;
left: -5px;
top: 200px;
}
.window:before {
height: 15px;
width: 310px;
left: -30px;
bottom: -15px;
}
.mountain-1 {
height: 0;
width: 0;
border-bottom: 60px solid #22366d;
border-right: 20px solid transparent;
position: absolute;
bottom: 0;
}
.mountain-1:before,
.mountain-1:after,
.mountain-2:before {
content: "";
position: absolute;
height: 0;
width: 0;
border-bottom: 60px solid #22366d;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.mountain-1:before {
bottom: -60px;
left: 5px;
}
.mountain-1:after {
bottom: -60px;
left: 35px;
}
.mountain-2 {
position: absolute;
height: 0;
width: 0;
border-bottom: 60px solid #22366d;
border-left: 20px solid transparent;
right: 0;
bottom: 0;
}
.mountain-2:before {
bottom: -60px;
right: 10px;
}
.kitty {
background-color: #2d2623;
height: 140px;
width: 50px;
position: absolute;
bottom: -15px;
left: 95px;
border-radius: 40px 40px 0 0;
}
.kitty:before {
content: "";
position: absolute;
background-color: #2d2623;
height: 80px;
width: 40px;
border-radius: 0 80px 80px 0;
bottom: 0;
left: 43px;
}
.kitty:after {
content: "";
position: absolute;
background-color: #2d2623;
height: 80px;
width: 10px;
border-radius: 5px;
bottom: -70px;
left: 45px;
transform: rotate(-15deg);
transform-origin: top;
animation: tail 4s infinite;
}
@keyframes tail {
50% {
transform: rotate(10deg);
}
}
.ear {
height: 0;
width: 0;
border-bottom: 40px solid #2d2623;
border-right: 33px solid transparent;
position: relative;
bottom: 12px;
}
.ear:before {
content: "";
position: absolute;
height: 0;
width: 0;
border-bottom: 40px solid #2d2623;
border-left: 33px solid transparent;
bottom: -40px;
left: 17px;
}
.moon {
height: 80px;
width: 80px;
border-radius: 50%;
background-color: transparent;
box-shadow: -15px 8px 0 1px #e8ae4a;
position: absolute;
left: 50px;
top: 60px;
}
.star {
background-color: #e8ae4a;
height: 6px;
width: 6px;
border-radius: 50%;
position: absolute;
top: 30px;
left: 140px;
box-shadow: 80px 65px #e8ae4a, -120px 150px #e8ae4a, -80px 280px #e8ae4a,
70px 235px #e8ae4a, 40px 135px #e8ae4a;
animation: twinkle 2s infinite;
}
@keyframes twinkle {
50% {
opacity: 0.4;
}
}
Our Animation is finally ready. If you have any queries, suggestions or, feedback write them in the comments below. In case, you face any issues with creating this project, you can download the source by clicking on the download button below. Also, stay tuned for more fun tutorials. Happy Coding!
