🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
Introduction
A fading text animation creates a smooth transition where the text gradually appears or disappears. This effect can be achieved using CSS @keyframes with the opacity property to control the visibility of the text over time.
In this tutorial, you'll learn how to create a fading text animation using HTML and CSS.
Problem Statement
Create a CSS code that:
- Animates text to fade in and out using the
@keyframesandopacityproperties. - Demonstrates how to control the speed of the fade animation.
Example:
- Input: A heading element with the text "Fading Text Animation".
- Output: The text smoothly fades in and out continuously.
Solution Steps
- Use
@keyframesfor Fade Animation: Define keyframes to change the text's opacity from0(invisible) to1(fully visible). - Apply the Fade Effect to Text: Use the
animationproperty to control the duration and repetition of the fade animation.
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fading Text Animation</title>
<style>
/* Step 1: Define keyframes for the fading animation */
@keyframes fadeInOut {
0%, 100% {
opacity: 0; /* Fully invisible */
}
50% {
opacity: 1; /* Fully visible */
}
}
/* Step 2: Apply fade animation to text */
.fading-text {
font-size: 3rem;
color: #3498db;
animation: fadeInOut 4s infinite; /* 4-second animation, infinite loop */
font-family: Arial, sans-serif;
text-align: center;
margin-top: 100px;
}
/* Center the container */
.container {
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="fading-text">Fading Text Animation</h1>
</div>
</body>
</html>
Output
Explanation
Step 1: Define @keyframes for Fading Animation
The
@keyframesrule defines the fade in and fade out effect by animating theopacityproperty:@keyframes fadeInOut { 0%, 100% { opacity: 0; /* Invisible at start and end */ } 50% { opacity: 1; /* Fully visible at the midpoint */ } }At
0%and100%of the animation timeline, the text is fully transparent (opacity: 0), while at50%, it becomes fully visible (opacity: 1).
Step 2: Apply the Fade Effect to Text
To apply the fading animation, use the
animationproperty:.fading-text { animation: fadeInOut 4s infinite; }The
4sduration defines the length of the fade cycle, andinfiniteensures the animation loops continuously.
Step 3: Center the Text for Better Presentation
- Center the text using
text-align: centerand add some margin for better layout:.container { text-align: center; margin-top: 100px; }
Conclusion
Creating a fading text animation with CSS is simple using @keyframes and the opacity property. This effect adds smooth transitions to your text, making it a great option for intros, messages, or any element that needs gradual visibility changes.
Comments
Post a Comment
Leave Comment