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;
}
}