<a href="">Hello
       <span class="wave"> 👋</span>
    </a>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext");
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    background-image: linear-gradient( 90.4deg, #fec7c3 1.1%, #fee8bd 22.7%, #fdfea2 37.2%, #a0fee9 55.4%, #a5edff 72.4%, #ebc3fe 101.9%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    user-select: none;
}

a {
    text-decoration: none;
    color: #000000;
    font-size: 30px;
}

.wave:hover {
    animation-name: wave-animation;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    transform-origin: 70% 70%;
    display: inline-block;
}

@keyframes wave-animation {
    0% {
        transform: rotate( 0.0deg)
    }
    10% {
        transform: rotate(14.0deg)
    }
    20% {
        transform: rotate(-8.0deg)
    }
    30% {
        transform: rotate(14.0deg)
    }
    40% {
        transform: rotate(-4.0deg)
    }
    50% {
        transform: rotate(10.0deg)
    }
    60% {
        transform: rotate( 0.0deg)
    }
    100% {
        transform: rotate( 0.0deg)
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.