Thursday, February 5, 2026

Vibration of font in chrome - Shaking of font in chrome - transform in css - color change in second - Keyframes in CSS - blinking in CSS - blinking 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); }

}