In this post we will learn, how to blink text in HTML using CSS key frames and also we will see the demo how to blink the text with JQuery.
<style type=”text/css”>
.blink{
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/* For Chrome and Opera browser support*/
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
/* For Mozilla browser support*/
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
color: blue;
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
/* For Mozilla browser key frames support*/
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
/* For Chrome and Opera browser key frames support*/
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>
HTML:
<span class="blink">Hi this Sairam from ASPDOTNET SAIRAM</span>
Demo:
Code:
<!DOCTYPE html>
<html>
<head>
<title>How to blink the text-ASPDOTNET SAIRAM</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
(function blink() {
$('.blink').fadeOut(500).fadeIn(500, blink);
})();
</script>
</head>
<body>
<!-- Start your code here -->
<span class="blink">Hi this Sairam from ASPDOTNET SAIRAM- demo 2</span>
<!-- End your code here -->
</body>
Demo:
Method 1: Blinking the Text using CSS Keyframes
CSS: Add this css part to your page header.<style type=”text/css”>
.blink{
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/* For Chrome and Opera browser support*/
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
/* For Mozilla browser support*/
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
color: blue;
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
/* For Mozilla browser key frames support*/
@-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
/* For Chrome and Opera browser key frames support*/
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>
HTML:
<span class="blink">Hi this Sairam from ASPDOTNET SAIRAM</span>
Demo:
Method 2: Blinking the Text with JQuery
In this method we do with JQuery,Code:
<!DOCTYPE html>
<html>
<head>
<title>How to blink the text-ASPDOTNET SAIRAM</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
(function blink() {
$('.blink').fadeOut(500).fadeIn(500, blink);
})();
</script>
</head>
<body>
<!-- Start your code here -->
<span class="blink">Hi this Sairam from ASPDOTNET SAIRAM- demo 2</span>
<!-- End your code here -->
</body>
Demo:
Hope you like the post, please feel free to comment and Share the Effort
EmoticonEmoticon