Published on: 17 Jan, 2019

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

Tumblr Digg Google Plus

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.

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

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.