How to make a simple unread notification animation (ex: with a bell icon)

When building notifications UI elements it is very common to point out when a user has new elements to read. This is achieved in most cases with an animation, for example if we have a bell icon we're gonna to make it swing every # seconds.

Today we're gonna to see this, you can find a finished example in this pen.

As usual we're gonna use FontAwesome and, in this case, the SVG format of the "fa-bell" icon (remember to read the license indications). So, when we have it's markdown on our page we will add this animation (Courtesy of Animate.css).

The animation (part 1)

svg {
    animation: custom-swing 1s;
    -webkit-animation: custom-swing 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes custom-swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

The main animation is set, but as you can see it's... too invasive 😜: our bell swings "forever" and fast.

We need to add some "delay" in the main animation between the swings, so we will use some Math and logic to get around it.

The animation (2 part)

In few words we need do edit the keyframe in order to "finish" the animation early, leaving some "space" as a delay.
At the moment our animation last 1 second, but if we want to our bell swing for 1 second and wait "about" 4 seconds before another one we have to set the animation to 5 seconds.

After this, we have to "divide" and limit the animation timing to complete in about 1/5 of the total.

svg {
    animation: custom-swing 5s;
    -webkit-animation: custom-swing 5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes custom-swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

Here it is, now we have some delay between the swings, and you can play with duration and percentages as you like to adjust the result!

Photo by Arturo Rey on Unsplash