JSFiddle - React, Tailwind, and code Playground
HTML
<img src="http://www.acclaimclipart.com/free_clipart_images/cartoon_tiger_waving_0521-1001-2914-1348_SMU.jpg" />
<div>[hand waving]</div>
CSS
html {overflow:hidden;}
div {
overflow:none;
position:absolute;top:127px;left:232px;
width:58px;height:70px;
background-image:url('http://www.acclaimclipart.com/free_clipart_images/cartoon_tiger_waving_0521-1001-2914-1348_SMU.jpg');
background-position:-225px -120px;
text-indent:-12000em;
border-radius:40px;
-webkit-animation:wave 500ms infinite;
-webkit-transform-origin:bottom left;
-moz-animation:wave 500ms infinite;
-moz-transform-origin:bottom left;
-ms-animation:wave 500ms infinite;
-ms-transform-origin:bottom left;
animation:wave 500ms infinite;
transform-origin:bottom left;
}
@-webkit-keyframes wave {
0% {
-webkit-transform:rotate(3deg);
}
50% {
-webkit-transform:rotate(-3deg);
}
100% {
-webkit-transform:rotate(3deg);
}
}
@-moz-keyframes wave {
0% {
-moz-transform:rotate(3deg);
}
50% {
-moz-transform:rotate(-3deg);
}
100% {
-moz-transform:rotate(3deg);
}
}
@-ms-keyframes wave {
0% {
-ms-transform:rotate(3deg);
}
50% {
-ms-transform:rotate(-3deg);
}
100% {
-ms-transform:rotate(3deg);
}
}
@keyframes wave {
0% {
transform:rotate(3deg);
}
50% {
transform:rotate(-3deg);
}
100% {
transform:rotate(3deg);
}
}
JavaScript
// hand waving with CSS3
// Creepy
//http://jsfiddle.net/sfzc2/
// Cartoon Tiger
//http://jsfiddle.net/sfzc2/1/