Text Shake

export function TextShake() {
  return (
    <span className="text-neutral-400 hover:animate-text-shake">
      Text Shake
    </span>
  );
}

{
  "animation": {
    "text-shake": "text-shake 1s ease 1"
  },
  "keyframes": {
    "text-shake": {
      "15%": {
        "transform": "translateX(5px)"
      },
      "30%": {
        "transform": "translateX(-5px)"
      },
      "50%": {
        "transform": "translateX(3px)"
      },
      "80%": {
        "transform": "translateX(2px)"
      },
      "100%": {
        "transform": "translateX(0)"
      }
    }
  }
}