IMG-LOGO
Home Blog CSS3

How to create blinking background color and text using CSS3 animation?

andy - 17 Jan, 2019 79608 Views 4 Comment

In this tutorial, we are going to learn how to create a blinking background color using CSS3 animation property. No javascript code is required. To make the blinking background color, we are going to use the CSS property called animation. We will use the infinite option which means, the animation will keep looping without stopping. We will use 5 different colors on different in 2-second duration.

Let's get started with the HTML code first. We going to wrap the text inside a div. Alternatively, you can wrap it in a span as well if you prefer.

<div class="blink-bg">Example animation using CSS3</div>

And here is the full code for css3 styles.

<style>
	.blink-bg{
		color: #fff;
		padding: 10px;
		display: inline-block;
		border-radius: 5px;
		animation: blinkingBackground 2s infinite;
	}
	@keyframes blinkingBackground{
		0%		{ background-color: #10c018;}
		25%		{ background-color: #1056c0;}
		50%		{ background-color: #ef0a1a;}
		75%		{ background-color: #254878;}
		100%	        { background-color: #04a1d5;}
	}
</style>

If you see on the CSS style, I add some padding and also some border-radius to make it prettier. By default, the div tag has a default display as block container. The inline-block CSS property is used to ensure the div is positioned as the same line as other element tags. You can see that I refer the animation CSS named blinkingBackground which will have keyframes animations in 5 stages which have will set different colors on each stage.

How about if I want to make the blinking color apply to the text only not the background color?

That one is simple, what you need to do is to change the CSS background-color property to color property. 

<style>
	.blink-text{
		color: #000;
		font-weight: bold;
		font-size: 2rem;
		animation: blinkingText 2s infinite;
	}
	@keyframes blinkingText{
		0%		{ color: #10c018;}
		25%		{ color: #1056c0;}
		50%		{ color: #ef0a1a;}
		75%		{ color: #254878;}
		100%	{ color: #04a1d5;}
	}
</style>

Demo

You can see both of the CSS3 animation demo below.

Example animation using CSS3

CSS3 Blink Text

Pretty easy right? If you have any question regarding with the CSS3 animation, feel free to post your question below.

Share:
Facebook Twitter

Comments

John
13 Jan, 2020
How would I initiate the blinking background on an element ONLY AFTER I've had the text in the element replaced using JavaScript?
andy
18 Jan, 2020
Hi John, What you can do is in the element, do not apply the blink-text css class yet. Once the text has been added. You can use Javascript to add the css class.
Mick
10 Apr, 2020
Hi Andy, I have a background image described in my CSS as: background-image: url("./images/error-32.png"); it's part of a class I use on a <TD> cell in a table .... example, <td class="failure">This is an error!</td> What I want to do is just blink the image on that row/cell, not the text & not the background-color, just the image. Is that possible? Here's the CSS (and the whole row, cell blinks when implemented). #results td.failure { background-color: #f5c6cb; color: #721c24; width: 13%; text-align: center; font-family: Tahoma; font-size: 13px; font-weight: bold; vertical-align: middle; background-image: url("./images/error-32.png"); background-position: 10px; background-repeat: no-repeat; background-size: 20px 20px; animation-name: alert; animation-duration: .75s; animation-iteration-count: infinite; } @keyframes alert { from {background-color: #721c24;} to {background-color: #f5c6cb;} }
Gayu
01 Jul, 2022
Any idea on how to dynamically pass the background blinking colors from script code ?
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles

How to draw a circle in CSS?

CSS3
22 Oct, 2019
In this article, we are going to learn how to draw a circle in CSS. Firstly what needs to do is to create a CSS class called circle.