Waving Hand Animation using CSS

Creating a waving hand animation using CSS involves using keyframe animations. We have provided a complete working code snippet for creating waving hand animation using CSS.

Follow the following video for complete guidance :

Complete Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
      .hand {
        animation-name: wave-animation;
        animation-duration: 2.5s;
        animation-iteration-count: infinite;
        transform-origin: 70% 70%;
        display: inline-block;
      }
      .absolute{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      h3{
        font-family: monospace;
      }

      @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) }
      }

      body { 
        font-size: 3rem;
        background: beige;
      }
    </style>
  </head>
  <body>
    <div class="absolute">
      <span class="hand">👋</span>
      <h3>Hi</h3>
    </div>
  </body>
</html>

The above code creates a webpage featuring a waving hand animation and the text “Hi.” In the HTML section, there is a div element with a class absolute to center its content. Inside this div, there is a span element with a class hand, displaying a waving hand emoji (represented by the “👋” character), and an h3 heading displaying the word “Hi.”

In the CSS section, the .hand class is styled to apply the waving animation. The animation is defined using the @keyframes rule named wave-animation, specifying different rotation angles at various percentages of the animation duration. The animation-name property associates the element with the defined animation, and animation-duration sets the duration of each wave cycle to 2.5 seconds. animation-iteration-count is set to infinite to make the animation loop infinitely. The transform-origin property determines the point around which the hand rotates, and display: inline-block ensures the hand emoji is displayed inline with the text.

ALSO READ Design Full Page Overlay Advertisement using HTML, CSS and JavaScript

The .absolute class positions the content absolutely in the center of the webpage using the position, top, left, and transform properties. The h3 element is styled to use a monospace font. The entire webpage has a background color of beige and a large font size of 3rem, creating a visually appealing presentation of a waving hand and the greeting “Hi.”