Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a sleepy rabbit animation. To create this animation we will use HTML and CSS. We do not make use of any images, icons or external libraries and plugins to create this animation.
We first create the rabbit artwork from scratch and then add keyframes to it to build the animation.
As I have mentioned in my tutorials before, this kind of complicated animation hardly finds application in real-world projects. However, they are a fun way to learn and explore new CSS properties.
If you are a CSS beginner, I would advise you to go ahead and give this tutorial a try. In case, you are looking for more such tutorials you can check out this playlist here. This playlist consists of a bunch of CSS animation tutorials.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can watch the video down below. Also subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.
Also, I do post multiple choice questions and quizzes that will help you with your interviews.
Project Folder Structure:
Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Rabbit 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 one is the stylesheet.
HTML:
We begin with the HTML code. First, 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>Rabbit Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="tail"></div>
<span class="z-1">Z</span>
<span class="z-2">Z</span>
<span class="z-3">Z</span>
<div class="rabbit-body">
<div class="face-container">
<div class="rabbit-face">
<div class="ear"></div>
<div class="eye-l"></div>
<div class="eye-r"></div>
<div class="mouth"></div>
</div>
</div>
<div class="leaf"></div>
<div class="carrot"></div>
<div class="hand-l"></div>
<div class="hand-r"></div>
</div>
<div class="shadow"></div>
</div>
</body>
</html>
CSS:
Next, we style the elements created by HTML to give them shape and add animation using CSS. Now copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #e25a61;
}
.container {
height: 31em;
width: 31em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.rabbit-body {
background-color: #d7dfe7;
height: 8.12em;
width: 15.62em;
border-radius: 8.12em 8.12em 0 0;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 11.25em;
background: radial-gradient(
circle at 0 50%,
#b5becd,
#b5becd 60%,
#d7dfe7 61%
);
z-index: 1;
}
.tail {
position: absolute;
background-color: #ffffff;
height: 3.4em;
width: 3.4em;
border-radius: 50%;
right: 5.93em;
top: 15.93em;
}
.face-container {
transform: rotate(-10deg);
transform-origin: 0 100%;
animation: nod 5s ease-in-out infinite;
}
@keyframes nod {
50% {
transform: rotate(0deg);
}
}
.rabbit-face {
background-color: #d7dfe7;
height: 5.93em;
width: 9.3em;
border-radius: 4.68em 4.68em 0 0;
position: absolute;
left: -1.25em;
top: -1.87em;
}
.rabbit-face:before {
position: absolute;
content: "";
background-color: #d7dfe7;
width: 11.25em;
height: 3.75em;
left: -0.93em;
top: 5.62em;
border-radius: 4.37em;
}
.ear {
background-color: #d7dfe7;
height: 8.12em;
width: 2.18em;
position: relative;
top: -4.06em;
left: 0.31em;
border-radius: 1.25em 1.25em 0 0;
box-shadow: 6.56em 0 0 #d7dfe7;
z-index: -1;
}
.ear:before {
position: absolute;
content: "";
background-color: #cd92b4;
height: 7.31em;
width: 1.37em;
top: 0.37em;
left: 0.37em;
border-radius: 1.56em;
box-shadow: 6.56em 0 0 #cd92b4;
}
.eye-l,
.eye-r {
position: absolute;
height: 0.81em;
width: 1.56em;
background-color: #101010;
border-radius: 0 0 1.87em 1.87em;
top: 3.75em;
}
.eye-l {
left: 1.56em;
}
.eye-r {
right: 1.56em;
}
.eye-l:before,
.eye-r:before {
content: "";
position: absolute;
background-color: #d7dfe7;
height: 0.75em;
width: 1.12em;
border-radius: 0 0 0.9em 0.9em;
left: 0.23em;
bottom: 0.25em;
}
.mouth {
background-color: #ffffff;
position: absolute;
height: 1.87em;
width: 2.5em;
border-radius: 50% 50% 50% 50%/ 30% 30% 70% 70%;
margin: auto;
left: 0;
right: 0;
top: 4.06em;
}
.mouth:before {
position: absolute;
content: "";
height: 0.93em;
width: 1.25em;
border-radius: 50% 50% 50% 50%/ 30% 30% 70% 70%;
margin: auto;
left: 0;
right: 0;
background-color: #101010;
}
.hand-l,
.hand-r {
position: absolute;
height: 2.5em;
width: 5em;
bottom: 0;
border-radius: 0.93em 0.93em 0 0;
}
.hand-l {
background-color: #b5becd;
left: -3.12em;
}
.hand-r {
background-color: #ffffff;
left: 5em;
}
.hand-l:before,
.hand-r:before {
position: absolute;
content: "";
height: 2em;
width: 3.12em;
bottom: 0;
border-radius: 0.62em 0.62em 0 0;
}
.hand-l:before {
background-color: #ffffff;
right: -1.56em;
}
.hand-r:before {
background-color: #b5becd;
left: -1.56em;
}
.carrot {
position: absolute;
background-color: #e78f1d;
width: 7.5em;
height: 2.5em;
border-radius: 25% 65% 65% 25%/ 50% 50% 50% 50%;
left: -4.37em;
bottom: 0.62em;
transform: rotate(15deg);
}
.leaf,
.leaf:before {
position: absolute;
height: 2.5em;
width: 2.5em;
border-radius: 2.5em 0;
}
.leaf {
background-color: #c9cf55;
transform: rotate(-40deg);
bottom: 2.5em;
left: -5em;
}
.leaf:before {
content: "";
background-color: #9eb42e;
transform: rotate(-80deg);
bottom: 0;
left: -1.25em;
}
.container span {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 2em;
color: #4f1f22;
position: absolute;
transform: rotate(10deg);
animation: snore 9s infinite linear forwards;
}
@keyframes snore {
30% {
transform: rotate(10deg) translateY(0);
opacity: 1;
}
100% {
transform: rotate(10deg) translateY(-7em);
opacity: 0.2;
}
}
.container .z-1 {
top: 5.5em;
left: 4.5em;
animation-delay: 7s;
}
.container .z-2 {
top: 7em;
left: 3.5em;
animation-delay: 1s;
}
.container .z-3 {
top: 5em;
left: 6em;
}
.shadow {
background-color: #d34b58;
width: 25em;
height: 0.5em;
border-radius: 0.31em;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 19.37em;
}
@media screen and (min-width: 700px) {
.container {
font-size: 20px;
}
}
That’s it for this tutorial. If you face any issues while creating this animation, you can download the source code by clicking on the ‘Download Code’ button below. Also, if you have any queries, suggestions or feedback you can comment below.
Happy Coding!
