sujkxw
Last Updated: February 25, 2016
·
354
· zecho
Avatar500

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.
Say Thanks
Respond

2 Responses
Add your response

19342
12049427 982908061769390 5765749297253908817 n

nice.. i like it

over 1 year ago ·
19505
D42a7264714dee5006b9c99d2567a320

You should add the blur filter to the demo :)

over 1 year ago ·