Mascot Animation using HTML + CSS

I created an animated version of phpbot.org’s mascot using only HTML and CSS. Wanna know how I did it?

Michael Loscalzo
Aug 18, 2017 · 6 min read
Image for post
Image for post

WHAT IS A MASCOT?

A mascot is an illustrated character that represents a company. Mascots can act as an ambassador for a business. Famous mascots include the Kool-Aid Man. Oh yeahhhhh!

WHAT IS A PHP BUTLER?

Writing out PHP code line-by-line is no longer necessary when you have a free personal PHP butler do it for you! Visit phpbot.org to give the tool a try.

WHY CODE?

Why?! How dare you! Creating this character is going to be awesome because…

  • CSS animation is mobile-friendly.
  • A character created using code will render beautifully regardless of viewport. Bring on the retina display!
  • There is great browser support for CSS animation.
Image for post
Image for post
An animated GIF of the end result!

The Process

Enough of the chit chat — Let’s make something cool!

MEASUREMENTS & COLOR SAMPLING

First, let’s take Jeff’s measurements. Although I plan to take some small liberties with the design, I want to be true to Rhys' vision.

Image for post
Image for post
Pixel measurements
Image for post
Image for post
The color palette

THE MARKUP

The HTML needed is minimal. We’ll do the heavy lifting in the style sheet because that approach will give us the most control when we’re animating.

<div class=”php-bot”>
<span class=”hat”></span>
<span class=”eye”></span>
<span class=”mouth”></span>
</div>

THE STYLES

Dudes, I am salivating just thinking about this code!

.php-bot .eye {
width: 52px;
height: 52px;
background-color: #444;
display: block;
margin: 47px auto 0px auto;
border-radius: 50%;
border: 46px solid #fff;
position: relative;
}
Image for post
Image for post
.php-bot .mouth {
width: 100px;
height: 50px;
background-color: #444;
display: block;
margin: 25px auto 0px auto;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
overflow: hidden;
}
/* PSEUDO ELEMENT */
.php-bot .mouth:before {
content: '';
width: 60px;
height: 60px;
background-color: #ff7c7c;
display: block;
border-radius: 50%;
margin: 30px auto 0px auto;
}
.php-bot .hat {
width: 60px;
height: 18px;
position: absolute;
top: -18px;
left: 50%;
margin-left: -30px;
background-color: #b3b3b3;
}
.php-bot .hat:before {
content: '';
height: 46px;
width: 60px;
background-color: #444;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
position: absolute;
top: -46px;
}
.php-bot .hat:after {
content: '';
border-bottom: 5px solid #444;
border-right: 3px solid #444;
border-left: 3px solid #444;
width: 92px;
height: 10px;
display: block;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
left: -19px;
bottom: -5px;
position: absolute;
}
.php-bot:before {
content: '';
width: 200px;
height: 30px;
background-color: #e1e1e1;
position: absolute;
border-radius: 50%;
top: 95%;
left: 50%;
margin-left: -100px;
}

THE ANIMATION

This part of the process is the most difficult to communicate. Although I can share the code, one should also consider the principles of animation.

“Squash and Stretch refers to the volume of the character and the shapes it forms through movement. For example a character bends down to jump and then leaps into the air.

Image for post
Image for post
The ‘squash and stretch’ principle illustrated.

This can be seen as squash and stretch. When the character is knelt down they form a more squashed shape, when they leap up into the air they form a stretched shape.

This same principle can be applied to anything. For example a bouncing ball.”¹

Learn more about the 12 basic principles of animation!

.php-bot {
animation-name: jump;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes jump {
0%, 20% {
margin: -150px 0px 0px -150px;
height: 300px;
width: 300px;
}
40%, 70% {
margin: -100px 0px 0px -175px;
height: 250px;
width: 350px;
}
60% {
margin: -300px 0px 0px -125px;
height: 350px;
width: 250px;
}
80% {
margin: -50px 0px 0px -200px;
height: 200px;
width: 400px;
}
100% {
margin: -150px 0px 0px -150px;
height: 300px;
width: 300px;
}
}
Image for post
Image for post
Jeff leaps!
  • The eye: Reducing the height (using borders) of the eye gives the impression of Jeff’s body rolling backwards.
Image for post
Image for post
Pop!
  • The mouth: I chose to morph Jeff’s mouth into a circle to give the impression that he’s huffing and puffing as he forces his bulbous body skyward. I added some cheeks to really hammer this home.
Image for post
Image for post
Once again, a look at the final product.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store