ComponentsText Shake
Text Shake
Text Shake
TextShake.tsx
export function TextShake() {
return (
<span className="text-neutral-400 hover:animate-text-shake">
Text Shake
</span>
);
}
tailwind.config.ts
{
"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)"
}
}
}
}