How can you add animated text in your website using HTML CSS, below are some examples, you can use it to add animated text fade in and fade out on your website using keyframes:
**HTML:**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Animated Text</title>
</head>
<body>
<div class="animated-text">
<h1>Fading Text</h1>
</div>
</body>
</html>
**CSS (styles.css):**
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.animated-text {
text-align: center;
}
/* Define the animation */
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Apply the animation to the text */
.animated-text h1 {
font-size: 36px;
animation: fadeInOut 3s infinite; /* Play the animation infinitely */
}
The fade-in and fadeout keyframes used define the rules for animations in the CSS. In the example used above, you can also make changes in the CSS, and you can also customize it according to your wishes.
By watching this animation, you can make different types of animations by yourself. If you like this information, please comment.