Hello wizards 👋,
Welcome to CSS Animation Series (Part-02/10)
Today, in this blog you’ll learn how to create the "Jelly Animation" project using HTML, & CSS.
In the above video, you’ve seen the making of the "Jelly Animation" and I hope now you can create this type of animation. If not, I have provided all the HTML & CSS code below.
Jelly Animation [Source Code]
To get the following HTML, CSS & JS code for the Jelly Animation. You need to create three files one is an HTML file, and another one is a CSS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code & .css extension for CSS code.
You can also download all source code files from the given download button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jelly Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Jelly Animation</h1>
<img class="jelly" src="jelly.png" alt="jelly">
</body>
</html>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: slateblue;
color: white;
font-family: sans-serif;
height: 100vh;
}
.jelly {
width: 180px;
animation: jelly 1s infinite;
}
@keyframes jelly {
0% {
transform: scale(1);
}
25% {
transform: scaleY(1.3) scaleX(0.8);
}
50% {
transform: scaleY(0.8) scaleX(1.2);
}
75% {
transform: scaleY(1.2) scaleX(0.8);
}
100% {
transform: scale(1);
}
}