How to make text blinking with CSS or jQuery

Here, am setting animation duration should be  1 second , than am setting the  timing  to  linear  that means it will be constant throughout, and last am using  animation-iteration-count  and I`ve set that to  infinite that means it will go on and on. Am calling the same properties with a -webkit  prefix for  webkit browser support as well as  -moz  for older versions of Firefox.

Test script on: http://jsfiddle.net/umz8t/

HTML
Blink - ‹p class="blink_me"› Blink ‹/p›
‹!-- Add class="blink_me" to the element --›

CSS

.blink_me {
    color:#0153A5;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 0;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

Alternatively if you do not want a gradual transition between show and hide (e.g. a blinking text cursor) you could use something like 

/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {
   0% { visibility: visible; }
   50% { visibility: hidden; }
   100% { visibility: visible; }
}
.cursor {
animation: blinker steps(1) 1s infinite;
}

If you want to add some colors to blink/fade effect add  color:red;  to every percentage.

    0% { opacity: 1.0; }
    50% { opacity: 0.3; color:red;}
    100% { opacity: 1.0;  color:blue;}

This won`t work on older versions of Internet Explorer, for that, you need to use jQuery or JavaScript....

jQuery

function blinker() {
    $(`.blink_me`).fadeOut(500).fadeIn(500);
}

setInterval(blinker, 1000); //Runs every second

Examples with CSS blinking effects http://www.w3schools.com/css/css3_animations.asp

How to DRAG a div

ritnikotkata.com