Make the logo spin

Your corporate logo is pretty boring. You've already made it bigger at the boss's request, but you still need to make it pop.

Try animation.

Animation is defined by Wikipedia, the encyclopedia anyone can edit, as "the process of creating motion and shape change illusion by means of the rapid display of a sequence of static images that minimally differ from each other." Now that's a mouthful but it's not as hard as it sounds!

In fact, it's this easy:

<div class="container">
  <h1 class="spin logo">🐝</h1>
</div>

Pretty easy, right? But that's not all. You need to do more than that. Don't be stupid.

.spin {
  animation-duration: 3s;
  animation-name: spin;
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

Here's a demo.

Some good tips:

• The more animations on your page, the more it pops.
• If you make elements move in lots of different directions at the same time, you can make people feel queasy, so it's really good to do that if your client sells motion-sickness medication.
• Use the blur filter with an animation. It does this cool thing where it makes everything in your browser really slow. Perfect for a local newspaper website.