What I was after

I was trying to create the blinking “|” character in the header of this web site without putting too much load on it because it’s not really a major element of the site. Because of the potential for abuse and poor user experience, blink is a contentious topic online amongst developers.

The result(s)

In the 5th result on Google, Alternative for <blink>, user edCoder redirects to a Stack Exchange answer by pstenstrm to the question How to make text blink on website? [duplicate] (http://stackoverflow.com/questions/20270096/how-to-make-text-blink-on-website/20270551#20270551).

The important bits

The relevant bit in the code was setting up a character you want to flash and then surround it by a span tag with a unique class (like blinking-text), then add the following to your CSS:

.blinking-text {
 -moz-animation-duration: 600ms;
 -moz-animation-name: tgle;
 -moz-animation-iteration-count: infinite;
 -moz-animation-direction: alternate;
 -webkit-animation-duration: 600ms;
 -webkit-animation-name: tgle;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 animation-duration: 600ms;
 animation-name: tgle;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 }
 @-moz-keyframes tgle {
 0% {
 opacity: 0;
 }
 49.99% {
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 99.99% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}
@-webkit-keyframes tgle {
 0% {
 opacity: 0;
 }
 49.99% {
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 99.99% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}
@keyframes tgle {
 0% {
 opacity: 0;
 }
 49.99% {
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 99.99% {
 opacity: 1;
 }
 100% {
 opacity: 0;
 }
}