Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a witch animation. To build this animation, we need HTML and CSS.
Â
This is a beginner-friendly CSS tutorial. Even with little knowledge of CSS, you can try out this tutorial. Before we start the tutorial, I would like you to know that animations like this one hardly find any use in real-world applications. The only reason I build these animations and do tutorials on them is to experiment and explore various CSS properties.
Â
The key concepts which we will learn from this tutorial are – transform, transform-origin box-shadow, animation, position -absolute and position relative. The topics include – pseudo-elements, animation duration, animation delay etc.
Â
If you are interested to learn CSS by practising more such tutorials, you can check out this playlist here. This playlist consists of 50+ CSS animation tutorials that will help you improve your CSS skills.
Video Tutorial:
If you would like to learn by watching a video tutorial rather than reading this blog post, you can check out the video down below. Also, subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.
Project Folder Structure:
Now before we start to code, let us take a look at the project folder structure. We create a project folder called – ‘Witch Animation’. Within this folder, we have two files. The first file is index.html which is an HTML document, while the second file is the stylesheet.
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document. Now 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>Witch Animation</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="witch">
<div class="hair">
<div class="hat"></div>
<div class="face">
<div class="eye"></div>
<div class="mouth"></div>
</div>
</div>
<div class="cloak">
<div class="hand-l">
<div class="stick"></div>
</div>
</div>
<div class="hand-r"></div>
</div>
<div class="stick2"></div>
<div class="bubbles">
<div class="bubble-1"></div>
<div class="bubble-2"></div>
</div>
<div class="claudron">
<div class="handle"></div>
<div class="stand"></div>
<div class="potion"></div>
</div>
</div>
</body>
</html>
CSS:
Next, we shape and position these elements with CSS. For this copy, the code provided to you below and paste it into the stylesheet. We also add animations to this art we have created using CSS.
body {
padding: 0;
margin: 0;
background-color: #723457;
}
.container {
position: absolute;
width: 330px;
height: 480px;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.witch {
position: absolute;
top: 100px;
left: 110px;
}
.hair {
height: 0;
width: 80px;
border-bottom: 80px solid #ff7903;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
.hat {
background-color: #0b081b;
width: 160px;
height: 25px;
border-radius: 50%;
position: relative;
right: 38px;
bottom: 5px;
}
.hat:before {
content: "";
position: relative;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #0b081b;
bottom: 95px;
left: 28px;
}
.hat:after {
width: 0;
height: 0;
content: "";
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 40px solid #0b081b;
position: absolute;
right: 45px;
bottom: 83px;
transform: rotate(20deg);
}
.face {
background-color: #ffcb9b;
height: 60px;
width: 80px;
border-radius: 0 0 40px 40px;
z-index: 1;
position: relative;
}
.eye {
background-color: #6155bd;
height: 9px;
width: 9px;
border-radius: 50%;
position: relative;
top: 18px;
left: 15.2px;
box-shadow: 0 -3px 0 5px #1f1a43, 37px 0 0 0 #6155bd,
37px -3px 0 5px #1f1a43;
}
.mouth {
height: 2px;
background-color: #000000;
width: 40px;
position: relative;
left: 20px;
top: 30px;
}
.mouth:before,
.mouth:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 7px solid #ffffff;
top: 2px;
}
.mouth:before {
left: 4px;
}
.mouth:after {
right: 4px;
}
.cloak {
height: 0;
width: 80px;
border-bottom: 180px solid #0e0c29;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
position: relative;
right: 20px;
}
.hand-l {
background-color: #0e0c29;
height: 30px;
width: 70px;
position: relative;
right: 65px;
bottom: 0;
transform: rotate(20deg);
transform-origin: right;
animation: wave 2s infinite;
}
@keyframes wave {
50% {
transform: rotate(5deg);
}
}
.hand-l:before {
content: "";
position: absolute;
background-color: #ffcb9b;
height: 25px;
width: 20px;
right: 70px;
top: 2px;
border-radius: 10px 0 0 10px;
}
.stick {
background-color: #b35900;
height: 100px;
width: 10px;
border-radius: 10px;
position: relative;
bottom: 80px;
left: -15px;
}
.hand-l:after {
content: "";
position: absolute;
background-color: #ffcb9b;
height: 10px;
width: 10px;
border-radius: 15px;
top: 10px;
right: 71px;
}
.hand-r {
background-color: #0e0c29;
height: 80px;
width: 30px;
position: absolute;
left: 90px;
bottom: 98px;
transform: rotate(-25deg);
}
.hand-r:before {
content: "";
position: absolute;
background-color: #ffcb9b;
height: 15px;
width: 20px;
border-radius: 0 0 15px 15px;
left: 10px;
top: 80px;
}
.stick2 {
background-color: #b35900;
height: 200px;
width: 18px;
border-radius: 25px;
transform: rotate(23deg);
position: relative;
top: 220px;
left: 210px;
animation: mix 4s infinite;
}
@keyframes mix {
50% {
transform: translateX(-100px) rotate(-23deg);
}
}
.bubble-1 {
background-color: #29a329;
height: 30px;
width: 30px;
opacity: 0.6;
border-radius: 50%;
position: relative;
top: 130px;
left: 130px;
animation: move-up-1 3s 0.5s infinite;
}
@keyframes move-up-1 {
100% {
transform: translateY(-95px);
}
}
.bubble-2 {
background-color: #29a329;
height: 20px;
width: 20px;
opacity: 0.6;
border-radius: 50%;
position: relative;
top: 130px;
left: 210px;
animation: move-up-2 3.2s 1.5s infinite;
}
@keyframes move-up-2 {
100% {
transform: translateY(-90px);
}
}
.claudron {
background-color: #222222;
height: 150px;
width: 200px;
position: relative;
margin: auto;
top: 50px;
border-radius: 100px;
}
.claudron:before {
content: "";
position: absolute;
background-color: #222222;
height: 40px;
width: 100%;
border-radius: 50px;
}
.handle {
background-color: transparent;
height: 40px;
width: 240px;
border: 7px solid #222222;
position: absolute;
border-radius: 40px;
margin: auto;
left: -27px;
top: 55px;
}
.stand,
.stand:before {
height: 0;
width: 5px;
border-top: 15px solid #222222;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
position: absolute;
}
.stand {
bottom: -10px;
transform: rotate(20deg);
left: 40px;
}
.stand:before {
content: "";
position: absolute;
bottom: 35px;
left: 90px;
transform: rotate(-40deg);
}
.potion {
background-color: #29a329;
height: 70px;
width: 20px;
border-radius: 0 0 50px 50px;
position: relative;
bottom: 0;
left: 120px;
}
.potion:before {
content: "";
position: absolute;
height: 35px;
background-color: #29a329;
width: 15px;
left: 30px;
border-radius: 0 0 30px 30px;
}
.potion:after {
content: "";
position: absolute;
background-color: #29a329;
height: 22px;
width: 50px;
bottom: 70px;
right: 60px;
border-radius: 25px 25px 0 0;
}
That’s all for this tutorial. You can now go ahead, and customize this animation the way you like by changing the colours, animation durations, transform values etc.
If you face any issues while creating this code, 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 on them below.
Happy Coding!
