CSS Shake text

To create a shaking effect for text using CSS, you can use CSS animations and keyframes. Here’s an example of how to make text shake horizontally:

HTML:

<div class="shaking-text">Shaking Text</div>

CSS:

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

.shaking-text {
  animation: shake 0.5s infinite;
}

In this example, we have a <div> element with the class “shaking-text.” We define a CSS animation named “shake” using @keyframes. The animation moves the text horizontally back and forth using the transform: translateX() property.

• At 0% keyframe, the text is at its original position (transform: translateX(0);).
• At 25% keyframe, the text moves 5 pixels to the left (transform: translateX(-5px);).
• At 50% keyframe, the text moves 5 pixels to the right (transform: translateX(5px);).
• At 75% keyframe, the text moves 5 pixels to the left again (transform: translateX(-5px);).
• At 100% keyframe, the text returns to its original position (transform: translateX(0);).

We then apply the animation to the “shaking-text” class with a duration of 0.5 seconds (0.5s) and set it to repeat infinitely (infinite). The text will shake horizontally back and forth continuously.

You can adjust the animation duration and the number of keyframes to control the speed and intensity of the shaking effect. Additionally, you can apply this technique to other elements or modify the animation to achieve different shaking effects.