Reading time 3 minutes
This guide will walk you through creating animated text effects with CSS. The animations apply gradient colors, blur effects, and a smooth wipe-in transition to text.
1. HTML Structure
The HTML code defines three headers (<h1>) with unique gradient animations:
<h1 class="fancy-wipe">
<span class="text">Transference</span>
<span class="wipe-in">Transference</span>
<span class="blur-in">Transference</span>
</h1>
<h1 class="fancy-wipe" style="--colors: linear-gradient(90deg, #4ec6f3, #e10fb4)">
<span class="text">Serendipitous</span>
<span class="wipe-in">Serendipitous</span>
<span class="blur-in">Serendipitous</span>
</h1>
<h1 class="fancy-wipe" style="--colors: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(255,0,0,1) 100%)">
<span class="text">Ostentatious</span>
<span class="wipe-in">Ostentatious</span>
<span class="blur-in">Ostentatious</span>
</h1>Key Points:
- Each header uses class=”fancy-wipe“.
- Inside each header, there are three <span> elements:
- .text: Plain text with a basic color.
- .wipe-in: Gradient color applied with a wipe-in effect.
- .blur-in: Gradient color with a blur effect.
2. CSS Styling
The CSS handles the layout, animations, and gradient effects.
Global Styles:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: #222; /* Dark background for contrast */
color: white; /* Default text color */
font-family: Raleway, sans-serif; /* Clean font */
}fancy-wipe Class:
Defines the layout and animation properties.
.fancy-wipe {
position: relative; /* Position for child elements */
font-weight: 900;
font-size: 6rem; /* Large text */
--duration: 2.5s; /* Animation duration */
--easing: cubic-bezier(0.45, 0, 0.55, 1); /* Smooth easing */
--colors: linear-gradient(90deg, #fff89a, #cdf2ca, #a2cdcd); /* Default gradient */
}Text and Animation Effects:
1. Plain Text (.text):
- White color with a wipe animation using masking.
.text {
display: block;
padding: 2rem;
color: white;
animation: wipe-in var(--duration) infinite var(--easing);
mask: linear-gradient(to right, white, white 45%, black 55%, black);
mask-size: 300% 100%;
mask-position: 100% 0;
}2. Wipe Effect (.wipe-in):
- Gradient text with a smooth wiping transition.
.wipe-in {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 2rem;
background-image: var(--colors);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: wipe-in var(--duration) infinite var(--easing);
mask: linear-gradient(to right, black, black 45%, white 50%, black 52.5%);
mask-size: 300% 100%;
mask-position: 100% 0;
}3. Blurred Gradient (.blur-in):
- Gradient with a blur filter for a glowing effect.
.blur-in {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 2rem;
background-image: var(--colors);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: blur(10px);
animation: wipe-in var(--duration) infinite var(--easing);
mask: linear-gradient(to right, black, black 45%, white 52.5%, black 55%);
mask-size: 300% 100%;
mask-position: 100% 0;
}4. Animation (@keyframes):
- Controls the movement of the wipe effect.
@keyframes wipe-in {
100% {
mask-position: 0 0; /* End position */
}
}3. Customizing the Effect
- Change –duration for slower or faster animations.
- Modify –colors in the inline style attribute of < h1 >to change gradients.
- Adjust filter: blur() in .blur-in for more or less glow.
4. Demo
To see the effect:
- Copy the code into an HTML file.
- Open it in a browser.
- Experiment with different colors and animation speeds.
This step-by-step approach lets you create visually stunning text animations with CSS. Use it to enhance headings or emphasize content on your website!
Thanks for your article. Another item is that being a photographer consists of not only problems in catching award-winning photographs but hardships in acquiring the best photographic camera suited to your needs and most especially challenges in maintaining the quality of your camera. This can be very real and evident for those photographers that are straight into capturing the actual nature’s fascinating scenes : the mountains, the actual forests, the wild or the seas. Going to these exciting places definitely requires a video camera that can live up to the wild’s harsh areas.
Regards for this tremendous post, I am glad I discovered this website on yahoo.
I like this site very much so much superb info .
I like the helpful info you provide in your articles. I’ll bookmark your weblog and check again here frequently. I am quite certain I will learn plenty of new stuff right here! Good luck for the next!