Animation can make wave 👋 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 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:

--

--

--

Developer @ solvative.com, Blogs @ http://blog.shhdharmen.me, Open source @ http://github.com/shhdharmen, Writer @ indepth.dev

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Best Ways to Speed Up Your Software Development Process

Thank You LinuxWorld and Redhat

BigQuery — An Encounter with Dynamic SQL’s

DiffUtil — performant one way data flow with RxJava and Kotlin

Why you should not use IAM users

CSV to JSON with Python for MySQL upload

I’m Breaking Up With A Simple Life

Discovering GraphQL endpoints and SQLi vulnerabilities

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dharmen Shah

Dharmen Shah

Developer @ solvative.com, Blogs @ http://blog.shhdharmen.me, Open source @ http://github.com/shhdharmen, Writer @ indepth.dev

More from Medium

Customize Font Awesome Icons

Customize Font Awesome Icons

HORIZONTAL ALIGNMENT AND SPACING OF COLUMNS IN BOOTSTRAP

Simple CSS based dropdown menu

How to Code Swaying Bamboo with CSS🎋