You are first setting opacity: 1;
and than you are ending it on 0
, so it starts from 0%
and ends on 100%
so instead you should start on 0%
and set the opacity to 1
, going ahead set the opacity
to 0
at 50%
and than again set it to 1
at 100%.
.blink_me {
-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: 1s;
-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.0; }
100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
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.
As commented, this won't work on older versions of Internet Explorer, for that, you need to use jQuery or JavaScript....
function blinker() {
$('.blink_me').fadeOut(500).fadeIn(500);
}
setInterval(blinker, 1000); //Runs every second
Demo (Blinker using jQuery)