Open In App

How to Shake Text on hover using HTML and CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

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.




<!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.




<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>


Final Code: It is the combination of the above two code sections.




<!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>
<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>
  
<body>
  <div>
    <h2>Shake!</h2>
  </div>   
      
</body>
</html>


Output:



Last Updated : 31 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads