How to Shake Text on hover using HTML and CSS?

Last Updated : 02 Aug, 2024

Shaking Text animation is a very cool animation which can be used in websites, this animation can be easily created using some basic HTML and CSS, the below section will guide on how to create the animation.

HTML Code: In this section we have a basic div element which contains some text inside of it.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Shake Text</title>
</head>
<body>
  <div>
    <h2>Shake!</h2>
  </div>      
</body>
</html>

CSS Code: In this section first we will design the text with some basic CSS and use @keyframes animation and then use the transitionX() function to produce the shaking effect when we hover over the text.

html

<style>
 *{
    margin: 0;
    padding: 0;
  }
  /* designing the text*/
  div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5em;
    color: rgb(4, 110, 4);
  }
  /*creating the shake animation*/
  
  div:hover h2{
    animation:  shake 0.8s  ;
  }

  @keyframes shake{
    0%{
      transform: translateX(0)
    }
    25%{
      transform: translateX(25px);
    }
    
    50%{
      transform: translateX(-25px);
    }
    100%{
      transform: translateX(0px);
    }
  }
  
 </style>