Introduction:
In this tutorial, we will learn how to create an animated CSS cat using HTML and CSS. This playful feline companion will come to life on your web page, adding a touch of whimsy and delight to your project. By following the step-by-step instructions below, you will acquire the skills to bring this adorable cat animation to reality.
Things You Will Learn:
- Understanding the HTML structure of the cat animation
- Applying CSS styling to create the cat’s appearance
- Utilizing CSS animations to make the cat come alive
- Adding additional elements like ears, hands, and legs
Video Tutorial:
To assist you further, I have created a comprehensive video tutorial demonstrating the entire process. You can watch the tutorial on my YouTube channel by clicking the following link:
Project Folder Structure:
Before diving into the code, let’s set up the project folder structure to keep things organized. Create a new project folder and include the following files:
- index.html: This file will contain the HTML structure of the cat animation.
- style.css: This file will contain the CSS code for styling and animation.
HTML:
In the index.html file, copy and paste the HTML code below. This code establishes the basic structure of the animated cat and sets the stage for applying CSS styles and animations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dancing Cat CSS</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="face">
<div class="ear-l"></div>
<div class="ear-r"></div>
</div>
<div class="hand-l"></div>
<div class="hand-r"></div>
<div class="leg-l"></div>
<div class="leg-r"></div>
<div class="music-note"></div>
</div>
</body>
</html>
Â
CSS:
In the style.css file, add the following CSS code. This code defines the visual appearance of the cat and includes animations for various parts of the cat’s body.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #f5b638;
}
.container {
height: 25em;
width: 31.25em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
perspective: 50em;
}
.face {
background-color: #4d4dc4;
height: 7.5em;
width: 11.25em;
position: absolute;
transform: translateX(-50%);
left: 50%;
top: 3.12em;
border-radius: 0 0 3.12em 3.12em;
}
.face:before,
.face:after {
position: absolute;
content: "";
height: 0.4em;
width: 0.9em;
border: 0.43em solid #181758;
border-bottom: none;
border-radius: 1.25em 1.25em 0 0;
top: 1.87em;
}
.face:before {
left: 3.12em;
}
.face:after {
right: 3.12em;
}
.ear-l,
.ear-r {
position: absolute;
background-color: #f589aa;
height: 1.87em;
width: 0.93em;
bottom: 6.87em;
}
.ear-l {
border-radius: 0 3.75em 3.75em 0;
left: 0.62em;
box-shadow: 0 0 0 0.62em #4d4dc4, 4.18em 0.3em 0 -0.06em #4d4dc4;
}
.ear-r {
border-radius: 3.75em 0 0 3.75em;
right: 0.62em;
box-shadow: 0 0 0 0.62em #4d4dc4, -4.18em 0.3em 0 -0.06em #4d4dc4;
}
.ear-l:before {
position: absolute;
content: "";
height: 1.25em;
width: 1.25em;
background-color: #181758;
border-radius: 50%;
top: 5em;
left: 4.37em;
box-shadow: -2.18em 0 0 -0.37em #2f319f, 2.18em 0 0 -0.37em #2f319f,
-3.43em 0 0 -0.37em #2f319f, 3.43em 0 0 -0.37em #2f319f;
}
.ear-l:after {
position: absolute;
content: "";
height: 1.25em;
width: 3.12em;
background-color: #2f319f;
top: 8.74em;
left: 3.43em;
}
.ear-r:before {
position: absolute;
content: "";
height: 5em;
width: 5em;
background-color: #a7acf5;
top: 12.18em;
left: -6.56em;
box-shadow: 0 0 0 2.5em #4d4dc4;
border-radius: 1.87em;
}
.ear-r:after {
position: absolute;
content: "";
height: 0.62em;
width: 0.62em;
background-color: #4d4dc4;
top: 15.62em;
left: -4.37em;
border-radius: 50%;
}
.hand-l {
position: absolute;
height: 6.25em;
width: 6.25em;
border: 1.25em solid #4d4dc4;
border-right: none;
border-bottom: none;
border-radius: 3.12em 0.62em 0.62em 0.62em;
top: 13.12em;
left: 7.5em;
animation: move-hand-l 6s infinite;
transform-origin: 104% 0;
transform-style: preserve-3d;
}
@keyframes move-hand-l {
50% {
transform: rotateX(180deg);
}
}
.hand-l:before {
position: absolute;
content: "";
height: 1.25em;
width: 0.62em;
background-color: #4d4dc4;
bottom: -0.62em;
left: -0.62em;
border-radius: 0.62em;
}
.hand-r {
position: absolute;
height: 6.25em;
width: 6.25em;
border: 1.25em solid #4d4dc4;
border-top: none;
border-left: none;
border-radius: 0.62em 0.62em 3.12em 0.62em;
top: 8.12em;
right: 6.25em;
animation: move-hand-r 6s infinite;
transform-origin: 0 100%;
transform-style: preserve-3d;
}
@keyframes move-hand-r {
50% {
transform: rotateX(-180deg);
}
}
.hand-r:before {
position: absolute;
content: "";
height: 1.25em;
width: 1.87em;
background-color: #4d4dc4;
left: 4.68em;
border-radius: 0 0 0.62em 0.62em;
}
.hand-r:after {
position: absolute;
content: "";
height: 1.25em;
width: 0.62em;
background-color: #4d4dc4;
left: 4.68em;
top: -0.62em;
border-radius: 1.25em;
box-shadow: 1.25em 0 #4d4dc4;
}
.leg-l,
.leg-r {
height: 4.37em;
width: 1.87em;
background-color: #2f319f;
position: absolute;
top: 20em;
z-index: -1;
}
.leg-l {
left: 12.5em;
}
.leg-r {
right: 12.5em;
animation: stamp 2s infinite;
}
@keyframes stamp {
50% {
transform: translateY(-1.25em);
}
}
.leg-l:before,
.leg-r:before {
position: absolute;
content: "";
height: 1.25em;
width: 2.5em;
background-color: #4d4dc4;
top: 3.12em;
left: -0.31em;
border-radius: 0.93em 0.93em 0 0;
}
.music-note {
position: absolute;
height: 0.62em;
width: 2.5em;
background-color: #181758;
transform: scale(0.2);
top: 6.25em;
left: 15.62em;
animation: whistle 2s infinite;
}
@keyframes whistle {
100% {
transform: translate(6.25em, -6.25em);
opacity: 0;
}
}
.music-note:before {
position: absolute;
content: "";
height: 2.5em;
width: 0.62em;
background-color: #181758;
box-shadow: 2.5em 0 #181758;
}
.music-note:after {
position: absolute;
content: "";
height: 0.93em;
width: 0.93em;
background-color: #181758;
border-radius: 50%;
top: 1.87em;
left: -0.31em;
box-shadow: 2.5em 0 #181758;
}
Â
Conclusion:
Congratulations! You have successfully built an animated CSS cat for your web page. By following this tutorial, you have learned how to structure HTML elements, apply CSS styles, and create captivating animations. Feel free to experiment further by customizing the cat’s appearance or adding your own interactive elements. Have fun bringing your web projects to life with delightful animations!
