Text animation effects can bring life to your website’s typography. With CSS, you can create various animation effects, including changing the color of the text. Let’s see how we can achieve a gradient color animation effect on text using CSS.
To begin, create an HTML document and include the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Color Animation Effect</title>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
}
.animate-character {
background-image: linear-gradient(
-225deg,
#231557 0%,
#44107a 29%,
#ff1361 67%,
#fff800 100%
);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 2s linear infinite;
display: inline-block;
font-size: 4rem;
}
@keyframes textclip {
to {
background-position: 200% center;
}
}
</style>
</head>
<body>
<div class="animate-character">webdeveloperblogs</div>
</body>
</html>In the code above, we have a simple HTML document containing a div element with the class "animate-character". This is where our animated text will be displayed.
The CSS styles defined within the <style> tags are responsible for creating the text color animation effect. Here's a breakdown of the key CSS properties used:
background-imageandbackground-clipare used to apply a gradient background to the text.coloris set to#fffto make the text white.text-fill-colorand-webkit-text-fill-colorare set totransparentto make the text transparent.animationis used to apply the animation effect named "textclip". It has a duration of 2 seconds, linear timing function, and is set to repeat infinitely.@keyframesdefines the animation effect named "textclip". In this case, it animates thebackground-positionproperty from the initial position to 200% to create a smooth gradient animation.
When you open the HTML document in a browser, you’ll see the text “webdeveloperblogs” with a gradient color animation effect applied to it. The gradient colors specified in the background-image property will transition smoothly across the text, creating an eye-catching effect.
Conclusion: In this article, we explored how to create a text color animation effect using CSS. By applying a gradient background and animating the background-position property, we achieved a visually appealing animation on the text. Feel free to experiment with different colors, gradients, and animation properties to create your own unique text animation effects on your website.