Musical CSS animations

I didn’t mean to write two posts exactly a month apart, but I guess I only have free time once a month on exactly the 20th.

I’m still tweaking little details on this blog to improve readability, and I’m getting there! I’ve realized I have to spend some time away from looking at the screen to see what needs improving, so I’ve been slowly going back to this when I have free time. I made a few tweaks today, and I’m happy with the progress I’ve made.

But most importantly, I have an adorable little equalizer trio under all my post titles now! Earlier today, a friend linked me this medium article about redoing the twitter heart animation using only CSS animations, and I got really excited to make some of my own. While my equalizer does not have anywhere near the complexity of the twitter animation, it took only around 5 minutes to create from start to finish, and it was a lot of fun to tweak the animation so it looked good. I actually spent more time adding it into the site than making the animation itself, so here’s to a hopeful future of many more CSS animations!

I’m going to include this little “currently listening to” section in all of my blog posts from now on, so I also get to post cool music. So that’s fun. Here’s the code, if you’re interested in playing around with it:

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@keyframes updown1 {
  0%   {height: 10px;}
  33%  {height: 5px;}
  66%  {height: 1px;}
  100% {height: 10px;}
}

@keyframes updown2 {
  0%   {height: 2px;}
  33%  {height: 5px;}
  66%  {height: 9px}
  100% {height: 2px;}
}

@keyframes updown3 {
  0%   {height: 5px;}
  33%  {height: 1px;}
  66%  {height: 4px;}
  100% {height: 5px;}
}

.base {
  display: inline-block;
  width: 5px;
  height: 15px;
  background-color: black;
  margin-right: -4px;
}

.bar1 {
  width: 5px;
  height: 15px;
  background-color: white;
  animation: updown1 1s ease-in-out infinite;
  margin-right: -4px;
}

.bar2 {
  width: 10px;
  height: 15px;
  background-color: white;
  animation: updown2 1s ease-in-out infinite;
  margin-right: -4px;
}

.bar3 {
  width: 10px;
  height: 15px;
  background-color: white;
  animation: updown3 1s ease-in-out infinite;
  margin-right: -4px;
}

HTML:

1
2
3
4
5
6
7
8
9
10
11
<div class="base">
  <div class="bar1"></div>
</div>

 <div class="base">
  <div class="bar2"></div>
 </div>

<div class="base">
  <div class="bar3"></div>
</div>

I’m so excited to have free time now so I can work on all these small little things and not feel guilty for procrastinating. Until next time!