Welcome to today’s tutorial. In today’s tutorial, we will create a sleeping cat animation. To create this animation we need HTML and pure CSS. CSS Animations are a fun way to practice CSS properties and keyframes. So let us begin with our tutorial.
Video Tutorial:
I have a video version of this tutorial on my youtube channel. If you are interested in the video tutorial you can check it out down below.
Project Folder Structure:
Before getting started with the tutorial let us take a look at the project folder structure. The project folder is named – Sleepy Cat. Inside this folder, we have an HTML document file and a stylesheet. We name these files index.html and style.css.
HTML:
We create a div with the class container. We use this div to centre and wrap all the other elements. Within this container, we have two main divs. The first one is called shadow and the second one is called cat. The cat div consists of all other divs. We assign these divs class names which are ear, eye, mouth, nose, tail, body and bubble.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sleepy Cat Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="shadow"></div>
<div class="cat">
<div class="ear"></div>
<div class="eye"></div>
<div class="mouth"></div>
<div class="nose"></div>
<div class="tail"></div>
<div class="body"></div>
<div class="bubble"></div>
</div>
</div>
</body>
</html>
CSS:
Next, we shape these divs to create the cat using CSS. Copy the code provided below and paste it into your stylesheet.
We start by removing paddings and margins from the body. This is followed by setting the background color to #1f2964. Next, we set the dimensions for the container and centre it using the transforms.
In the next set, we set the background colour of the cat to #f19b1a and give a border-radius. By doing so we shape it to look like the cat face. We then shape the left ear by shaping it with a border-radius. To create the right ear we use the box-shadow property.
Other Tutorials You Might Like:
- Currency Formatter Using HTML, CSS And Javascript
- Random Gradient Generator Using Javascript
- Javascript Calculator
Both the eyes are created using the same div with the help of before pseudo-elements. We once again make use of pseudo-element to create the nose shape.
The creation by other shapes is also quite similar so I won’t be explaining them. If you need any help with creating these shapes using CSS, you can check out this playlist here.
We finally add keyframes to mouth, body and shadow. these keyframes do an almost similar job of scaling the elements up and down. With this being the final step, our animation is now ready.
body {
background-color: #1f2964;
padding: 0;
margin: 0;
}
.container {
height: 200px;
width: 350px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.cat {
background-color: #f19b1a;
height: 65px;
width: 80px;
border-radius: 0 80px 80px 0;
position: absolute;
bottom: 60px;
right: 50px;
}
.ear {
height: 15px;
width: 15px;
background-color: #f19b1a;
position: absolute;
bottom: 64px;
left: 8px;
border-radius: 20px 0 0 0;
box-shadow: 25px 0 #f19b1a;
}
.eye,
.eye:before {
height: 7px;
width: 10px;
border: 2px solid #2c2c2c;
position: absolute;
border-radius: 0 0 15px 15px;
border-top: none;
}
.eye {
top: 18px;
left: 15px;
}
.eye:before {
content: "";
left: 30px;
}
.nose {
background-color: #ffffff;
height: 12px;
width: 12px;
border-radius: 50%;
position: absolute;
top: 32px;
left: 25px;
box-shadow: 12px 0 #ffffff;
}
.nose:before {
content: "";
width: 12px;
height: 8px;
position: absolute;
background-color: #ffffff;
left: 6px;
}
.nose:after {
content: "";
position: absolute;
height: 0;
width: 0;
border-top: 8px solid #ef926b;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
bottom: 7px;
left: 6px;
}
.mouth {
background-color: #2c2c2c;
height: 15px;
width: 17px;
position: absolute;
border-radius: 0 0 5px 5px;
top: 38px;
left: 27px;
animation: mouth-move 2s infinite;
transform-origin: top;
}
@keyframes mouth-move {
50% {
transform: scaleY(0.7);
}
}
.body {
background-color: #f19b1a;
height: 90px;
width: 140px;
position: absolute;
right: 65px;
bottom: 0;
border-radius: 60px 60px 0 0;
animation: sleep 2s infinite;
transform-origin: bottom right;
}
@keyframes sleep {
50% {
transform: scale(0.9, 1.05);
}
}
.tail {
background-color: #d07219;
height: 20px;
width: 100px;
position: absolute;
right: 150px;
bottom: 0;
border-radius: 20px 0 0 20px;
}
.body:before {
content: "";
position: absolute;
background-color: #ffffff;
height: 12px;
width: 30px;
border-radius: 6px;
bottom: 0;
left: 22px;
box-shadow: 45px 0 #ffffff;
}
.bubble {
height: 20px;
width: 20px;
background-color: rgba(255, 255, 255, 0.4);
position: absolute;
left: 65px;
top: 20px;
border-radius: 50px 50px 50px 5px;
animation: bubble-scale 2s infinite;
}
@keyframes bubble-scale {
50% {
transform: scale(1.6);
}
}
.shadow {
height: 10px;
width: 240px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
position: absolute;
bottom: 52px;
left: 70px;
animation: shadow 2s infinite;
}
@keyframes shadow {
50% {
transform: scaleX(0.7);
}
}
If you have any issues while creating this, you can download the source code by clicking on the download button below. Also if you have any suggestions or feedbacks do leave them in the comments below.
