Ygo's world About games, gaming and game development and coding in general

CSS3 how to blink

Back in the days when the internet was in its infancy, the CSS had a very useful feature for text decoration: blink. I remember using it quite often in my early HTML output, because it believe it to be cool. Over time this way of catching user eye become to ostentatious and was trashed by professional approach to web design. Apparenntly it was trashed by CSS3 also because the text-decoration:blink; does not work anymore. Instead, to make a text blinking you need an animation:

.blink {animation-name: blinker;animation-duration: 1s;animation-timing-function: linear;animation-iteration-count: infinite;-webkit-animation-name: blinker;-webkit-animation-duration: 1s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;color:#FF0000;font-weight: bold;}

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

Talking about verbosity.