In this blog post, you'll discover how to create a text blinking animation using HTML and CSS. Make Automatic start and stop text blinking animation. We are going to make the animation using just HTML and CSS. To automatically stop the animation after some time for that only we'll use JavaScript.
How will we make text blink ?
We'll use CSS keyframes to achieve the animation effect. We'll define a separate class named "active" in which we’ll add the blinking animation with CSS keyframes. To apply the animation to the text, We’ll simply add the "active" class to the element containing the text that we want to blink. See the code example below for clarification.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Blinking Animation. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="text active">Maketechstuff.com</div>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background-color: #3F51B5;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
background-color: #fff;
padding: 15px;
border-radius: 10px;
text-align: center;
}
.text {
font-size: 45px;
font-weight: bold;
padding: 10px;
color: blue;
}
.active {
animation: blink;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes blink {
0% {
color: blue;
}
25% {
color: #fff;
}
50% {
color: blue;
}
75% {
color: #fff
}
100% {
color: blue;
}
}
As you can observe, the text is currently blinking. To eliminate this animation or to stop the animation after some time, you'll need to remove the active class. We'll leverage JavaScript to accomplish this task.
Here's the process:
Activate Text Blinking on Window Load:
Upon window load, we'll dynamically add the active class to the text element. This triggers the blinking animation immediately upon page load.
Stop Animation after a Delay:
To stop the animation after a designated period, we'll use JavaScript's setTimeout method. We'll set a timeout of 5 seconds, after which the active class will be removed from the text element, effectively stopping the blinking animation on text.
Refer to the code below for a visual representation of this implementation.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Blinking Animation. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="text">Maketechstuff.com</div>
</div>
</body>
</html>
JavaScript
let text = document.querySelector(".text");
window.addEventListener("load", animation);
function animation() {
// Add animation class to text animation on window load.
text.classList.add("active");
// Remove blink animation class after 5 seconds of window load.
setTimeout(() => {
text.classList.remove("active");
}, 5000);
}
Output:
This is how you can create a text blinking animation using HTML, CSS, and JavaScript. Feel free to share any questions or suggestions in the comments section below.
Share your thoughts.