Creating an Animated Site Logo with CSS3 Transitions

I have been working on a new music blog on my free time over the last several months. It is nothing special, just a little blog where I talk about bands I like, feature songs that I enjoy, and talk about concerts that I have been to or am planning on going to.

One thing I always struggle with as a frontend developer is the design. I am pretty darn good at turning someone else’s design into a reality, but coming up with my own design is usually a difficult task for me. It doesn’t help at all that my Adobe Illustrator skills are sorely lacking. That being said, I decided to tackle this head on this time around and what better place to start than the logo for the site?

When coming up with the logo, I considered many elements that were important to me:

1. The logo had to be simple, yet elegant
2. It had to somehow embody the idea that it was a music blog, without smacking people over the head with it
3. It had to be something that was unique enough to set itself apart
4. It had to be authentically digital (no skeuomorphism for me!)
5. And most importantly, it had to be something that I was capable of creating myself

With all of those qualifications in mind, I thought about images and symbols that evoke music, digital music. The image that immediately sprang to mind was that of a graphic equalizer, you know the kind, the series of vertical bars the rise and fall with the music. I immediately loved this idea, but the only problem was that the essence of a graphic equalizer is that it moves. But logos are usually static images, right? Well, with CSS3 transitions, they don’t necessarily have to be anymore. With that in mind, I set about on the task of making a logo that incorporated a “moving” graphic equalizer. The markup looked like this:

<div class="logo">
  <div class="logo_text">Mixtape</div>
  <div class="logo_bars">
    <div class="logo_bar one"></div>
    <div class="logo_bar two"></div>
    <div class="logo_bar three"></div>
    <div class="logo_bar four"></div>
    <div class="logo_bar five"></div>
    <div class="logo_bar six"></div>
    <div class="logo_bar seven"></div>
    <div class="logo_bar eight"></div>
    <div class="logo_bar nine"></div>
    <div class="logo_bar ten"></div>
  </div>
</div>

I have a wrapper div called “logo” that contains the text of the logo (the name of my music blog, “Mixtape”) and another div that contains each of the ten graphic equalizer bars that will be animated with CSS on hover. The CSS itself is pretty straight forward, I style the text to float above the moving bars and then I absolutely positioned each bar to flow below the logo text. Each logo_bar is given a different height and color (ranging from 0px to 60px and red to green respectively):

.logo {</pre>
  margin: 80px auto;
  width: 360px;
  zoom: 1;
  position: relative;
  cursor: pointer;
}
.logo .logo_text {
  position: absolute;
  top: -2px;
  color: white;
  font-family: arial;
  font-size: 102px;
  font-weight: normal;
}
.logo .logo_bars {
  position: relative;
  left: 6px;
  top: 98px;
}
.logo .logo_bars .logo_bar {
  transition: height 0.5s;
  width: 20px;
  height: 60px;
  position: absolute;
}
.logo .logo_bars .logo_bar.one {
  left: 0px;
  height: 45px;
  background: #f73936;
}
.logo .logo_bars .logo_bar.two {
  left: 24px;
  height: 36px;
  background: #ed462d;
}
.logo .logo_bars .logo_bar.three {
  left: 48px;
  height: 60px;
  background: #ec5632;
}
.logo .logo_bars .logo_bar.four {
  left: 72px;
  height: 24px;
  background: #ee6b37;
}
.logo .logo_bars .logo_bar.five {
  left: 96px;
  height: 12px;
  background: #eb8140;
}
.logo .logo_bars .logo_bar.six {
  left: 120px;
  height: 24px;
  background: #f29346;
}
.logo .logo_bars .logo_bar.seven {
  left: 144px;
  height: 42px;
  background: #f8be58;
}
.logo .logo_bars .logo_bar.eight {
  left: 168px;
  height: 36px;
  background: #eff76b;
}
.logo .logo_bars .logo_bar.nine {
  left: 192px;
  height: 18px;
  background: #bdf366;
}
.logo .logo_bars .logo_bar.ten {
  left: 216px;
  height: 12px;
  background: #a1f164;
}
.logo:hover .logo_bar.one {
  height: 30px;
}
.logo:hover .logo_bar.two {
  height: 18px;
}
.logo:hover .logo_bar.three {
  height: 24px;
}
.logo:hover .logo_bar.four {
  height: 42px;
}
.logo:hover .logo_bar.five {
  height: 18px;
}
.logo:hover .logo_bar.six {
  height: 24px;
}
.logo:hover .logo_bar.seven {
  height: 18px;
}
.logo:hover .logo_bar.eight {
  height: 48px;
}
.logo:hover .logo_bar.nine {
  height: 54px;
}
.logo:hover .logo_bar.ten {
  height: 24px;
}

As you can see, the transition is applied to the height of each logo_bar on mouse hover. The result is a cool twist on a logo that satisfies all of my requirements that I had originally laid out and instead of a normal static logo, I know have an awesome moving logo that sets the site apart, but also does not smack the user with over-the-top, in-you-face animations.

[click on the logo image below to link to a working example]