DEV Community

Cover image for Animation can make bell🔔 much more than emoji!
Dharmen Shah
Dharmen Shah

Posted on • Originally published at blog.shhdharmen.me

1 1 1 1 1

Animation can make bell🔔 much more than emoji!

We all use wave 🔔 emoji a lot in web apps!

Next time when you use it, try to add a simple wave animation to it...

@keyframes bell-keyframes {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.bell-animation {
  animation-duration: 1s;
  animation-iteration-count: var(--times, 1);
  animation-name: bell-keyframes;
  transform-origin: top center;
}

Enter fullscreen mode Exit fullscreen mode

I have also created a codepen for it:

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more