Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a cute frog animation. To create this animation we use HTML and pure CSS. We don’t make use of any images or libraries to create this animation.
These kinds of tutorials are a brilliant way to practice CSS animations and keyframes. So I would suggest you go through these tutorials if you are looking for tutorials to improve your CSS skills.
I have a playlist that consists of a bunch of tutorials on CSS animation. You can check out this playlist here on my youtube channel.
Video Tutorial:
If you are interested to learn by coding along to a video tutorial rather than reading this blog post you can check out the video here down below. I post new tips, tricks and tutorials on my youtube channel regularly. So subscribe to my youtube channel to get access to these resources.
Project Folder Structure:
Before we start the coding let us take a look at the project folder structure. We create a project folder called – ‘Frog Animation’. Inside this folder, we have two files. These files are index.html and style.css. They are the HTML document and the stylesheet respectively.
HTML:
We start with the HTML code. We use HTML to create elements needed to build the structure of the frog. Firstly copy the code below and paste it into your HTML file.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Frog Animation</title> <!-- Stylesheet --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="leg-l"></div> <div class="leg-r"></div> <div class="body"></div> <div class="face"> <div class="eyes"></div> <div class="tongue"></div> </div> </div> </body> </html>
CSS:
Next, we shape the elements created with HTML using CSS. You can check out this playlist here that will guide you on how you can create different shapes using CSS. Now copy the code provided below and paste it into your stylesheet.
*, *:before, *:after { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #fff29e; } .container { height: 400px; width: 400px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .face { background-color: #8ebc00; height: 120px; width: 160px; border-radius: 50%; position: absolute; margin: auto; left: 0; right: 0; top: 100px; } .face:before { content: ""; position: absolute; height: 60px; width: 120px; background-color: #c1d218; border-radius: 0 0 60px 60px; bottom: 0; left: 20px; } .face:after { content: ""; position: absolute; width: 140px; height: 8px; background-color: #477a26; border-radius: 5px; left: 10px; top: 55px; } .eyes, .eyes:before { position: absolute; background-color: #234106; height: 25px; width: 25px; border-radius: 50%; box-shadow: 0 0 0 10px #ffffff, 0 0 0 18px #8ebc00; } .eyes { left: 35px; } .eyes:before { content: ""; left: 70px; } .body { background-color: #c1d218; height: 60px; width: 70px; border-radius: 70px 70px 0 0; box-shadow: 0 -20px 0 20px #8ebc00; position: absolute; left: 165px; top: 230px; } .body:before, .body:after { position: absolute; content: ""; height: 40px; width: 25px; background-color: #8ebc00; top: 40px; transform: rotate(90deg); } .body:before { border-radius: 50% 0; left: -12.4px; } .body:after { border-radius: 0 50%; right: -12.4px; } .leg-l, .leg-r { position: absolute; height: 85px; width: 50px; background-color: #477a26; border-radius: 50%; bottom: 100px; } .leg-r { transform: rotate(30deg); left: 230px; } .leg-l { transform: rotate(-30deg); right: 230px; } .leg-l:before, .leg-r:before { content: ""; position: absolute; height: 25px; width: 50px; background-color: #477a26; border-radius: 30px 30px 0 0; bottom: 10px; } .leg-l:before { transform: rotate(30deg); right: 15px; } .leg-r:before { transform: rotate(-30deg); left: 15px; } .tongue { position: absolute; height: 0; width: 8px; background-color: #f57b78; border-radius: 8px; transform: rotate(-45deg); transform-origin: 100% 100%; bottom: 65px; left: 70px; animation: tongue 3s linear infinite; } @keyframes tongue { 5% { height: 130px; } 10% { height: 130px; } 25% { height: 0; } } .tongue:before { content: ""; position: absolute; height: 13px; width: 13px; background-color: #000000; border-radius: 50%; left: -1.5px; opacity: 0; box-shadow: 8px -8px 0 -2px #a0a0a0, -8px -8px 0 -2px #a0a0a0; animation: fly 3s linear infinite; } @keyframes fly { 5% { opacity: 1; } 20% { opacity: 1; } 22% { opacity: 0; } }
Your cute frog animation is now ready. That’s it 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, I would love to hear from you guys so if you have any queries, suggestions, or feedback do comment them below.
Happy Coding!
Â