Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a sheep animation. To build this animation, we need HTML and CSS.
We do not use any images, icons or external libraries to create the animation. We will create the sheep art from scratch with HTML and CSS and then animate it using CSS.
This is a beginner-friendly CSS animation. Even if you have basic knowledge of HTML and CSS, you can go for this tutorial. The key CSS properties that we will cover in this tutorial are – position, transform, animation, keyframes, transform-origin etc.
If you are looking for a more such tutorial to improve your CSS skills, you can check out this playlist here. This playlist consists of a bunch of CSS animation tutorials that will help you upgrade your CSS knowledge.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. If you like the video, subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day. Apart from this, I post multiple choice questions and quizzes based on HTML, CSS and Javascript. These quizzes will help you with your interviews.
Project Folder Structure:
Before we start coding, we create a project folder structure. The project folder is called – ‘CSS Sheep 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. We use HTML to create elements that build the layout and structure of our art.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sheep Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="face">
<div class="eye"></div>
<div class="ears"></div>
<div class="mouth"></div>
</div>
<div class="leg leg-1"></div>
<div class="leg leg-2"></div>
<div class="leg leg-3"></div>
<div class="leg leg-4"></div>
<div class="body"></div>
</div>
<div class="ground"></div>
</body>
</html>
CSS:
We then use CSS to shape and style these elements to form the desired art. Also, we use CSS to animate the created artwork. For this, copy the code below and paste it into your stylesheet.
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #fed767;
overflow: hidden;
}
.ground {
height: 9.37em;
width: 100%;
background-color: #f07c08;
position: absolute;
bottom: 0;
}
.ground:after {
position: absolute;
content: "";
height: 1.56em;
width: 343em;
background-repeat: repeat no-repeat;
background-size: 2.5em 1.56em;
background-image: radial-gradient(
circle at 1.25em 1.56em,
#f07c08 1.56em,
#fed767 1.56em
);
animation: slide 20s infinite linear;
transform: translateX(-250em);
}
@keyframes slide {
100% {
transform: translateX(0);
}
}
.container {
height: 31.25em;
width: 31.25em;
position: absolute;
transform: translateX(-50%);
bottom: 9.37em;
left: 50%;
}
.face {
height: 6.25em;
width: 8.75em;
background: linear-gradient(to right, #0c333f 80%, #0078bc 80%);
position: absolute;
top: 17.5em;
border-radius: 3.12em 0 0 3.12em;
left: 2.81em;
transform-origin: 50% 100%;
animation: face-shake 0.3s infinite;
}
@keyframes face-shake {
50% {
transform: rotate(-5deg);
}
}
.eye,
.eye:before {
position: absolute;
background-color: #002336;
height: 1.87em;
width: 1.87em;
border: 0.56em solid #ffffff;
border-radius: 50%;
}
.eye {
top: 1.25em;
left: 2.18em;
}
.eye:before {
content: "";
top: -0.56em;
left: 0.87em;
}
.ears,
.ears:after {
position: absolute;
height: 3.12em;
width: 1.25em;
background-color: #0c333f;
border-radius: 0.62em;
}
.ears {
top: -2em;
left: 4.68em;
transform: rotate(-25deg);
}
.ears:after {
content: "";
left: 0.93em;
top: 0.31em;
transform: rotate(50deg);
}
.mouth {
background-color: #8c1837;
height: 1.25em;
width: 2.5em;
border-radius: 0 0 1.25em 1.25em;
position: absolute;
left: 3.75em;
top: 4em;
overflow: hidden;
}
.mouth:after {
position: absolute;
content: "";
background-color: #c32954;
height: 0.93em;
width: 1.87em;
border-radius: 0.31em;
top: 0.31em;
left: 0.93em;
}
.body {
height: 15.62em;
width: 15.62em;
background-color: #0c333f;
border-radius: 50%;
position: absolute;
left: 11.87em;
top: 11.87em;
box-shadow: 0 7.81em 0 -5.62em #0c333f, 0 -7.81em 0 -5.62em #0c333f,
7.81em 0 0 -5.62em #0c333f, -7.81em 0 0 -5.62em #0c333f,
7.18em 3.12em 0 -5.62em #0c333f, 7.18em -3.12em 0 -5.62em #0c333f,
-7.18em 3.12em 0 -5.62em #0c333f, -7.18em -3.12em 0 -5.62em #0c333f,
3.12em 7.18em 0 -5.62em #0c333f, 3.12em -7.18em 0 -5.62em #0c333f,
-3.12em 7.18em 0 -5.62em #0c333f, -3.12em -7.18em 0 -5.62em #0c333f,
-5.62em -5.62em 0 -5.62em #0c333f, -5.62em 5.62em 0 -5.62em #0c333f,
5.62em -5.62em 0 -5.62em #0c333f, 5.62em 5.62em 0 -5.62em #0c333f;
animation: body-shake 0.4s infinite linear;
}
@keyframes body-shake {
50% {
transform: translateY(0.62em);
}
}
.leg {
position: absolute;
height: 6.25em;
width: 1.25em;
background-color: #002436;
border-radius: 1.25em;
bottom: 0;
}
.leg-1 {
left: 15em;
}
.leg-2 {
left: 17.5em;
}
.leg-3 {
left: 21.87em;
}
.leg-4 {
left: 24.37em;
}
.leg-2,
.leg-4 {
animation: run-1 0.4s infinite linear;
}
@keyframes run-1 {
33% {
transform: translate(-2.5em, -2.5em);
}
66% {
transform: translate(-2.5em, 0);
}
}
.leg-1,
.leg-3 {
animation: run-2 0.4s infinite linear;
}
@keyframes run-2 {
65% {
transform: translateY(0);
}
66% {
transform: translateY(-2.5em);
}
}
@media screen and (min-width: 700px) {
body {
font-size: 18px;
}
}
That’s all 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!
