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);
}
}
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;
}
I have also created a codepen for it:
