Text shaking animation is a visual effect applied to text, where the text appears to shake or vibrate in place. This effect is achieved by making small and rapid movements to the text, which creates the illusion of shaking.
Text-shaking animation can be used to draw attention to a particular piece of text, create a dynamic and energetic feel, or simply add some visual interest to a web page. It can be applied to any kind of text, including headings, paragraphs, and individual words or letters.
In web development, text-shaking animation can be created using various techniques, including CSS animations and transitions, JavaScript, and third-party libraries. By changing the duration, intensity, and timing of the animation, developers can create a wide range of shaking effects that suit their design needs.
Example Code 1:
<!DOCTYPE html>
<html>
<title>Online CSS Editor</title>
<head>
<style>
/* Define the styles for the text */
h1 {
font-size: 3rem;
text-align: center;
margin-top: 50px;
}
/* Define the keyframes for the animation */
@keyframes shake {
0% {transform: translateX(0);}
10%, 90% {transform: translateX(-5px);}
20%, 80% {transform: translateX(5px);}
30%, 50%, 70% {transform: translateX(-5px);}
40%, 60% {transform: translateX(5px);}
100% {transform: translateX(0);}
}
/* Apply the animation to the text */
h1 {
animation: shake 1s infinite;
}
</style>
</head>
<body>
<h1>Shaking Text Animation</h1>
</body>
</html>Output:
Example Code 2:
<!DOCTYPE html>
<html>
<title>Online CSS Editor</title>
<head>
<style>
h1 {
position: relative;
text-transform: uppercase;
letter-spacing: 6px;
font-size: 10vw;
font-weight: 900;
text-decoration: none;
color: white;
display: inline-block;
background-size: 120% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-ms-background-clip: text;
-ms-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
background-image: linear-gradient(45deg,
#7794ff,
#44107A,
#FF1361,
#FFF800);
animation: .8s shake infinite alternate;
}
@keyframes shake {
0% { transform: skewX(-10deg); }
5% { transform: skewX(10deg); }
10% { transform: skewX(-10deg); }
15% { transform: skewX(10deg); }
20% { transform: skewX(0deg); }
100% { transform: skewX(0deg); }
}
</style>
</head>
<body>
<h1>Shaking Text Animation</h1>
</body>
</html>Output:
Conclusion
It's important to use text-shaking animation judiciously, as it can quickly become overwhelming or distracting if overused. It's also important to consider accessibility and ensure that the effect does not interfere with the readability or usability of the text for users with different abilities.