How to Shake Text on hover using HTML and CSS? Last Updated : 02 Aug, 2024 Comments Improve Suggest changes Like Article Like 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. 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> Final Code: It is the combination of the above two code sections. 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> <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: Comment More infoAdvertise with us Next Article How to Shake Text on hover using HTML and CSS? L lakshgoel204 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to Skew Text on Hover using HTML and CSS? Skewed text animation effect can be created using HTML and CSS, this animation looks very cool and can be used in websites to make them look more dynamic, the following sections will guide on how to create the desired animation effect.First Section: In this section we will create a basic div tag whi 2 min read Shrink Text on Hover using HTML and CSS Text can be Shrinked or condensed using some HTML and CSS properties, you can use this animation in your websites as headings or sub-headings, the below sections will guide you on how to create the desired effect.HTML Code: In this section we have simple div element which contains the text separate 2 min read How to spin text on mouse hover using HTML and CSS? The spinning of text on mouse hover is known as the Spin Effect or the Rotation Effect. In this effect, each alphabet of the word is rotated along with any one of the axes (preferably Y-axis). Each word is wrapped inside in <li> tag and then using CSS:hover Selector selector we will rotate eac 3 min read How to Rotate a Text 360 Degrees on hover using HTML and CSS? Rotating text 360 degrees on hover is a visual effect that makes text spin around its center point when the user hovers their cursor over it. To rotate text 360 degrees on hover using HTML and CSS, you can apply a CSS animation to the text element.Rotate A Text 360 Degrees On HoverThe text is center 2 min read Shake a Button on Hover using HTML and CSS The shake button effect also known as the wiggle effect can be used to make the website look more responsive and dynamic. This is one of the best effects to understand the concept of @keyframes rule in CSS. Approach: The shake button effect or animation can be created using HTML and CSS, First, we w 2 min read Like