Creating the Treehouse Frog Animation

By  on  

The following post has been written by Brazilian developer Jones Dias. His English is much better than my Portuguese but since it isn't his native language, I've sprinkled in some extra detail to the post. Enjoy!

Free Treehouse Account

Before we start, I want to say thank you to David for giving me this awesome opportunity to share this experience with you guys and say that I'm really flattered. I think that CSS animations are really great. When I first learned how CSS animations worked, a big world of possibilities opened up in front of my eyes. If you learn how to create CSS animations, you'll be able to create animated buttons, forms, pages, menus, sliders, cartoon characters, etc.

I chose to animate Mike the Frog, the Treehouse mascot.

The HTML

A new element is created for each relevant part of the mascot's face:

<div class="mike">
  <div class="head">
    <div class="eyes">
      <div class="eye">
        <div class="pupil"></div>
      </div>
      <div class="eye">
        <div class="pupil"></div>
      </div>
    </div>
    <div class="nose">
      <div class="ball"></div>
      <div class="ball"></div>
    </div>
    <div class="mouth"></div>
  </div>
</div>

This example uses DIV elements but any block element type may be used.

The CSS

Once the HTML is done, I start setting the dimensions, background colors, borders and positioning properties:

div {
  border-radius: 50%;
  box-sizing: border-box;
}

.mike {
  width: 400px;
  margin: 0 auto;
  padding-top: 2%;
  transition: all 1s;
}

.mike:hover {
  transform: scale(1.5) rotate(360deg);
}

.head {
  width: 195px;
  height: 120px;
  background: #92ae57;
  position: relative;
  z-index: 1;
  margin-left: 103px;
}

.eyes {
  width:200px;
  position: absolute;
  bottom: 45px;
}

.eye {
  width: 95px;
  height: 93px;
  background-color: #ffe13b;
  border: 10px solid #92ae57;
  display: inline-block;
  z-index: 2;
  animation: eyes 5s infinite step-start 0s;
}

.eye:last-child {
  float:right;
}

.pupil {
  width: 1px;
  height: 1px;
  border: 10px solid #353535;
  display: inline-block;
  position: absolute;
  top: 38px;
  margin-left:27px;  
  z-index: 3;
  animation: pupil 5s infinite step-start 0s;
}

.pupil:last-child{
  float:right;
}

.ball {
  width: 1px;
  height: 1px;
  border: 5px solid #6f8346;
  position: absolute;
  top: 70px;
  left: 88px;
}

.ball:last-child {
  float:left;
  margin-left: 14px;
}

.mouth {
  height: 100px;
  width: 180px;
  border-bottom: 4px solid #6f8346;
  position: relative;
  top: 8px;
  left: 7px;
}

/* Animations */

@keyframes eyes {
   0%, 100% {
    background: #92ae57;
    border-radius: 50%;
    border: 10px solid #92ae57;
  } 

   5%, 95% {  
    background:#ffe13b;
    border-radius: 50%;
    border: 10px solid #92ae57;
  }
}

@keyframes pupil {
  0%, 100% {
    opacity: 0;
  }
  5%, 95% {
    opacity: 1;
 }
}

When I got Mike ready to be animated, I started by blinking his eyes. I created 2 keyframe rules to do it:

@keyframes eyes {
  0%, 100% {
    background: #92ae57;
    border-radius: 50%;
    border: 10px solid #92ae57;
  } 

  5%, 95% {
    background: #ffe13b;
    border-radius: 50%;
    border: 10px solid #92ae57;
   }
}

In this part, I set the eye to be opened during the periods between 5% and 95%. And to be closed in the 0% and 100%.

@keyframes pupil {
  0%, 100% {
    opacity: 0;
  }
  5%, 95% {
    opacity: 1;
 }
}

I set the pupil to be hidden in two points, 0% and 100%, and to stay showing during the period between 5% and 95%. But setting this up won't make the animation work, so I put the animation property to the eye and pupil with a duration of 5s infinitely using the step-start timing function. I set a hover with transform to the .mike element, making it scaled at 1.5 as big as it was and rotate it 360 degrees.

.mike:hover{
  transform: scale(1.5) rotate(360deg);
}

Finally, I selected all possible animating properties in the mike class, giving it a duration of 1 second.

.mike{
  transition: all 1s;
}

That's all folks! Creating this animation was easier than many may think -- no canvas or even JavaScript required, just pure CSS!

Jones Dias

About Jones Dias

Jones Dias is an up and coming web designer and front-end developer plying his trade in Brazil.

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Chris Coyier’s Favorite CodePen Demos IV

    Did you know you can triple-heart things on CodePen? We’ve had that little not-so-hidden feature forever. You can click that little heart button on any Pen (or Project, Collection, or Post) on CodePen to show the creator a little love, but you can click it again...

  • By
    jQuery Chosen Plugin

    Without a doubt, my least favorite form element is the SELECT element.  The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster.  Needless to say, whenever a developer goes...

Discussion

  1. WOW. Simple. Demo looks cool…Great job dude…

  2. Jones Dias

    Thanks, Akhil! I’m glad you like it ;)

  3. Awesome, haha. I got an idea to write a similar tutorial. Thanks Jones!

    • Jones Dias

      Great man! When you write the tutorial, send it to me, please.

      Thanks for reading, Toan.

  4. Tarun Elankath

    Isn’t this much, much simpler with SVG ?

  5. wow just amazing

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!