CSS Shake Text

CSS shake text is a fun and creative effect that can add some visual interest to your website or application. It involves animating the text to create a shaking or trembling effect, as if the letters are vibrating.

Here's an example of how to create a CSS shake text effect:

<p class="shake-text">Shake me!</p>

.shake-text {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    font-size: 24px;
  }
  
  @keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
  
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
  
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }

In this example, we create a <p> element with a class of shake-text. We then apply the animation property to this element, which specifies the shake animation with a duration of 0.82 seconds and a cubic-bezier easing function. We also add the transform property to create a 3D translation effect.

Next, we define the shake animation using the @keyframes rule. This animation consists of several keyframes that specify different transform values at different points in time. The keyframes are defined as percentages of the total animation duration.

When the shake animation is applied to the shake-text element, the text will shake or tremble in place, creating a playful and dynamic effect. You can adjust the animation duration and keyframe values to create different types of shake effects, such as more subtle or exaggerated shaking.