Animation plays a very important role to make the website attractive. Webpages are not only beautiful with text or images but adding a bit of creative art/animation makes it easier to grab the visitors attention.
In today’s tutorial, we will learn how to create a cat animation/art. To create this art/animation we will use HTML and CSS, No need to JavaScript. We do not make use of any images, icons or external libraries and plugins to create this animation.
As I have mentioned in my tutorials before, this kind of complicated art/animation hardly finds application in real-world projects. However, they are a fun way to learn and explore new CSS properties.
What you will learn in this tutorial:- Create the basic structure of a cat using HTML.
- Design different parts of the cat using CSS.
- Make the cat move using CSS animation and keyframes.
- Make it more beautiful and fun with some simple tricks.
This tutorial will be very easy for beginners too. Even if you have never worked with CSS animation before, you can easily follow the step-by-step process.
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.
HTML:
Next come the face parts. Inside the face there will be two round eyes, a small nose in the middle and a little hair-like line on either side. This part will be given the actual shape of the face.
Finally, we will add a table part. So it looks like the cat is getting of the table.
In this way, a simple structure is created using only HTML tags and then by adding color, shape and movement with CSS. Then it become animated like a real cartoon cat.
<div class="cat">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="face">
<div class="eye left"></div>
<div class="eye right"></div>
<div class="hair left">
<div></div>
<div></div>
<div></div>
</div>
<div class="hair right">
<div></div>
<div></div>
<div></div>
</div>
<div class="nose"></div>
</div>
</div>
<div class="table"></div>
StyleSheet (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.
Centering the cat:Here the body tag is arranged in such a way that whatever is inside is always visible in the center of the screen. That's why flexbox method is used, along with justify content and align items to bring the content to the center on the right, left, top and bottom. And the background is kept white so that the whole thing looks clean and focused.
This code is actually used only to center the items placed on the page.
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff;
}Next, the head class has been given an oval shape because the width and height have been kept separate and the border radius has been set too high, so it looks like a slightly elongated round head instead of being completely round.
It has been moved to the middle of the page with 8em auto of margin and a black line has been drawn around the head with border 5px so that the outline can be clearly understood.
position, relative has been given because later the small parts like eyes, ears, nose etc. will be placed inside this head and relative position is needed to place them in the right place.
.head {
width: 300px;
height: 200px;
border-radius: 250px;
margin: 8em auto;
border: 5px solid #010101;
position: relative;
animation: float ease-in-out 3s infinite;
}This .face class is actually given to create the main part of the cat face. Here, the width and height are set to 300x200 pixels, and the border radius is set to 250px to give it an oval shape so that it looks like a real face.
position, relative are used because the small parts like eyes, nose, hair, etc. will be placed inside this face and since they have relative positions, they can be easily placed in the right place. margin 0 and top 0 left 0 means that the face will start from the top inside the container.
Finally, #ffffff of background has been given a white color for the face so that it looks highlighted.
.face {
width: 300px;
height: 200px;
position: relative;
border-radius: 250px;
margin: 0;
top: 0;
left: 0;
background: #ffffff;
}This .table class is given to create a table part. Here a large box has been created with 500px of width and 500px of height. Since position, absolute is given, it can be placed directly in a specific place on the page.
border top 5px solid #010101 means that a black line has been given at the top of the table which is used to indicate the edge of the table. #ffffff keeps the background white so that it matches the background of the page.
It has been moved down to the middle with 20em-auto of margin and slightly down from the top with 10px of top..table{
width: 500px;
height: 500px;
position: absolute;
border-top:5px solid #010101;
background: #ffffff;
margin: 20em auto;
top: 10px;
}This entire .ear section is actually used to create the cat two ears.
First, the .ear class is given a height and width of 128px, so each ear starts with a square area. It is absolute, positioned so that it can be placed in the right place on the face. -20px of top means that it will be slightly above the face. The background is white and the outline of the ear is clearly understood by giving it a black border around it.
Then .ear.left:after and .ear.right:after are used to create the inner part of the ear. This inner part is kept pink, which looks like the inside of the real ear. The border radius is given a round shape on one side and a slightly curved shape on the other, so that the right and left ears have different curves. Box shadow is used to give a light shade to the inner side and it looks like depth.
Finally, .ear.left and .ear.right are customized separately.
The left ear is slightly turned and one side is slightly flattened and rounded. The right ear is slightly turned in the opposite direction and its shape is separated.
.ear {
height: 128px;
width: 128px;
position: absolute;
top: -20px;
background: #ffffff;
border: 5px solid #010101;
}
.ear.left:after {
content: '';
height: 128px;
width: 128px;
background: #f88b8e;
border-radius: 20% 50% 20% 50%;
position: absolute;
box-shadow: inset 0 0 0 10px #fff;
border: none;
}
.ear.right:after {
content: '';
height: 128px;
width: 128px;
background: #f88b8e;
border-radius: 50% 20% 50% 50%;
position: absolute;
box-shadow: inset 0 0 0 10px #fff;
border: none;
}
.ear.left {
transform: rotate(8deg);
left: -4px;
border-radius: 20% 50% 20% 50%;
}
.ear.right {
transform: rotate(352deg);
right: -4px;
border-radius: 50% 20% 50% 50%;
}This .eye class is used to create the cat two eyes.
First, the height and width of .eye are set to 30px and the border radius is set to 50%, making them perfectly round. The background is kept black so it looks like the pupil of the eye.
The eyes are placed in the correct place inside the mouth using position, absolute and 82px of top. Then, using .eye.right and .eye.left, the right eye is moved 24% of right and the left eye is moved 24% of left so that both eyes are evenly spaced in the middle of the mouth.
The most interesting thing is that .eye:after creates a small white spot inside each eye, which actually represents the light reflection of the eyes. A small white circle of 5px of height and 5px of width is used to create a light-emitting effect inside the eye with a box shadow, so that the eyes look shiny like real cartoon characters.
.eye {
height: 30px;
width: 30px;
position: absolute;
top: 82px;
background: #000;
border-radius: 50%;
}
.eye.right {
right: 24%;
}
.eye.left {
left: 24%;
}
.eye:after {
height: 5px;
width: 5px;
position: absolute;
top: 5px;
right: 1px;
border-radius: 100%;
box-shadow: 0 4px 8px #fff inset;
content: '';
background: #fff;
}
First, the .hair class is given absolute of position and 107px of top so that it sits in the middle of the face.
Small DIVs are used inside it. Each div is a line of whiskers. They are kept 5px of height and 100px of width so that they look like thin and long black spots. The lines are arranged with a little gap with 15px of margin top, so that the whiskers are visible one below the other.
Then .hair.left and .hair.right are customized separately.
The left mustache is placed -60px of left, meaning on the far left side of the face and slightly tilted with rotate(347deg).
The right mustache .hair.right is placed right: -60px and slightly tilted in the opposite direction with rotate(17deg).
.hair {
position: absolute;
top: 107px;
}
.hair div {
height: 5px;
width: 100px;
margin-top: 15px;
background: #000;
}
.hair.left {
left: -60px;
transform: rotate(347deg);
}
.hair.right {
right: -60px;
transform: rotate(17deg);
}The .nose element is given a height of 20 pixels and a width of 30 pixels. It creates a small oval shape. The 39% 39% 88% 88% of border radius makes the shape look like a nose rather than a perfectly round one. The background is kept black so it clearly looks like a nose.
Now let us come to the .nose:after and .nose:before elements. These are the curved lines of the face coming down from the bottom of the nose. Both are actually pseudo-elements that are created on either side of the nose. They have been given an elongated shape and are made like curved lines using 50% of border radius.
Each has a black border that actually acts as a line. The .nose:after element is placed on the left and the .nose:before element is placed on the right. Two curved lines are created below the nose that look like a cat smile.
.nose {
height: 20px;
width: 30px;
position: absolute;
top: 60%;
left: 44%;
border-radius: 39% 39% 88% 88%;
background: #000;
}
.nose:after, .nose:before {
content: '';
height: 35px;
top: 15%;
width: 34px;
background: transform;
position: absolute;
border-bottom: 5px solid #000000;
border-radius: 50%;
}
.nose:after {
left: -20px;
border-right: 5px solid #000000;
}
.nose:before {
left: 11px;
border-left: 5px solid #000000;
}This @keyframes float part is actually given to create an animation of the entire cat floating up and down. Here, the transform is being used to move it vertically up and down.
- At the beginning, 0% of the cat remains in its original position.
- Then 20% of the cat starts moving down, up to about 20em.
- And at the end, 100% of the cat return to its previous position.
This cycle continues over and over because the code uses float ease-in-out, so the cat will look like it is slowly floating up and down, just like a balloon or a funny cartoon floating animation.
@keyframes float {
0% {
transform: translateY(0);
}
20% {
transform: translateY(20em);
}
100% {
transform: translateY(0);
}
}Are you interested in CSS art? We have drawn pictures of the elephant, fox etc. using only CSS properties. These tutorials will entertain you.
That’s it for this tutorial. If you have any queries, suggestions or feedback you can comment below. Happy Coding!
Post a Comment