Vibration of font in chrome - Shaking of font in chrome - transform in css

HTML

<img src="https://ik.imagekit.io/ikmedia/css-image-effects/new-york_lbAbZZKZG.jpg" alt="new york" />

</br>

<p class="vibrating-text"> dfdf dfd ddfd df</p>

CSS

img {

  width: 300px;

}

img:hover {

  /* Start the shake animation and make the animation last for 0.5 seconds */

  animation: vibrate 0.1s;

  /* When the animation is finished, start again */

  animation-iteration-count: infinite;

}

@keyframes vibrate {

  0% { transform: rotate(0deg); }

  10% { transform: rotate(-1deg); }

  20% { transform: rotate(1deg); }

  30% { transform: rotate(0deg); }

  40% { transform: rotate(1deg); }

  50% { transform: rotate(-1deg); }

  60% { transform: rotate(0deg); }

  70% { transform: rotate(-1deg); }

  80% { transform: rotate(1deg); }

  90% { transform: rotate(0deg); }

  100% { transform: rotate(-1deg); }

}

OR

@keyframes vibratetext {

  0% { transform: translate(0, 0); }

  20% { transform: translate(-1px, 1px); }

  40% { transform: translate(-1px, -1px); }

  60% { transform: translate(1px, 1px); }

  80% { transform: translate(1px, -1px); }

  100% { transform: translate(0, 0); }

}

.vibrating-text:hover {

  animation: vibratetext 0.1s linear infinite;

  display: inline-block; /* Essential for transform to work on inline elements */

}

 ref:- https://dev.to/akhilarjun/four-subtle-text-effects-to-spice-up-your-web-site-27e7

https://unused-css.com/blog/css-shake-animation/

https://codewithandrea.com/articles/shake-text-effect-flutter/

https://chromewebstore.google.com/detail/wiggle/ckplmbnbflgjohojekkanjffeoaaeodj?hl=en

https://codepen.io/imagekit_io/pen/OJxapRm

https://codemyui.com/shaking-text-animation/

(wiggle)

chrome://settings/system

enable or disable hardware acceleration