A small post to show how wave animation can take your emoji to next level!
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 wave-animation {
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);
}
}.wave {
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-name: wave-animation;
display: inline-block;
transform-origin: 70% 70%;
}
I have also created a codepen for it:
