Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a pineapple animation. To build this cute animation project, we need HTML and CSS.
This animation might seem complicated to beginners. I would suggest this to CSS intermediates. Also, if you would like to learn more tutorials like this one, check out this playlist here. This playlist consists of a bunch of tutorials that will help you improve your CSS skills.
In real-world applications, this kind of complex CSS animation is hardly used. The only purpose of creating this tutorial is to introduce you to new CSS properties. It will be great practice for you if you code along while studying the properties that come up in the code.
Video Tutorial:
If you prefer to learn by watching a video tutorial rather than reading this blog post, you can check out the video down below. Also, you can subscribe to my youtube channel where I post new tutorials every alternate day.
Project Folder Structure:
Before we start coding, we take a look at the project folder structure. We create a project folder called – ‘Pineapple Animation’. Within this folder, we have two files – index.html and style.css. The first file is the HTML document, and the second one is the stylesheet.
HTML:
We begin with the HTML code. With HTML, we create elements to build the structure of our animation. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pineapple Animation</title>
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="pineapple">
<div class="leaf"></div>
<div class="leg-left"></div>
<div class="leg-right"></div>
<div class="eye-left"></div>
<div class="eye-right"></div>
<div class="mouth"></div>
</div>
<div class="shadow"></div>
</div>
</body>
</html>
CSS:
Next, we style the elements created with HTML using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
body{
padding: 0;
margin: 0;
background-color: #fcf8bb;
}
.container{
height: 350px;
width: 350px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
.pineapple{
background-color: #ffaa00;
height: 180px;
width: 140px;
border-radius: 65px;
position: absolute;
top: 100px;
left: 0;
right: 0;
margin: auto;
background-image: repeating-linear-gradient(
135deg,
transparent 0,
transparent 40px,
#ff9700 40px,
#ff9700 52px
),
repeating-linear-gradient(
45deg,
transparent 0,
transparent 40px,
#ff9700 40px,
#ff9700 52px
);
background-size: 200% 200%;
background-position: 0 17px;
animation: jump 0.5s infinite;
}
.pineapple:before,
.pineapple:after{
position: absolute;
content: "";
height: 80px;
width: 32px;
background-color: #ffaa00;
top: 25px;
z-index: -1;
transform-origin: bottom;
border-radius: 25px;
}
.pineapple:before{
left: 10px;
transform: rotate(-50deg);
animation: hand-l 0.5s infinite;
}
@keyframes hand-l{
50%{
transform: rotate(-42deg);
}
}
.pineapple:after{
right: 10px;
transform: rotate(50deg);
animation: hand-r 0.5s infinite;
}
@keyframes hand-r{
50%{
transform: rotate(42deg);
}
}
.leaf{
background-color: #498725;
height: 70px;
width: 70px;
border-radius: 70px 0;
transform: rotate(135deg);
position: absolute;
top: -65px;
z-index: -1;
margin: auto;
left: 0;
right: 0;
animation: leaves 0.5s infinite;
}
@keyframes leaves{
50%{
transform: rotate(135deg) translate(6px, -6px);
}
}
.leaf:before,
.leaf:after{
position: absolute;
content: "";
background-color: #3f6b15;
height: 70px;
width: 70px;
border-radius: 70px 0;
transform-origin: right;
top: -5px;
}
.leaf:before{
transform: rotate(40deg);
right: 20px;
animation: leaf-right 0.5s infinite;
}
@keyframes leaf-right{
50%{
transform: rotate(32deg);
}
}
.leaf:after{
transform: rotate(-40deg);
left: 20px;
animation: leaf-left 0.5s infinite;
}
@keyframes leaf-left{
50%{
transform: rotate(-32deg);
}
}
.leg-left,
.leg-right{
height: 80px;
width: 32px;
background-color: #ffaa00;
border-radius: 25px;
position: absolute;
top: 130px;
border-radius: 25px;
z-index: -1;
}
.leg-left{
left: 22px;
animation: legs 0.6s infinite;
}
.leg-right{
right: 22px;
animation: legs 0.6s 0.3s infinite;
}
@keyframes legs{
50%{
transform: translateY(-15px);
}
}
.eye-left,
.eye-right{
background-color: #1e1e1e;
height: 24px;
width: 24px;
border-radius: 50%;
position: absolute;
top: 70px;
animation: blink 1s infinite;
}
.eye-left{
left: 32px;
}
.eye-right{
right: 32px;
}
@keyframes blink{
20%{
transform: scaleY(0.3);
}
25%{
transform: scaleY(1);
}
}
.mouth{
height: 20px;
width: 35px;
background-color: #1e1e1e;
border-radius: 0 0 35px 35px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 105px;
}
@keyframes jump{
50%{
top: 95px;
}
}
.shadow{
height: 30px;
width: 160px;
background-color: rgba(30,30,30,0.05);
border-radius: 50%;
position: absolute;
top: 290px;
z-index: -2;
margin: auto;
left: 0;
right: 0;
animation: shadow 0.5s infinite;
}
@keyframes shadow{
50%{
transform: scaleX(0.85);
}
}
That’s it for this tutorial. If you face any issues while creating this code, you can download the source code by clicking on the download button below. Also if you have any queries, suggestions or feedback comment below. Happy Coding!
