Ako na blikanie textu na webe cez CSS

Potreboval som na stránke pri určitej udalosti rozblikať text kvôli jeho zvýrazneniu. Ako prvé mi napadlo použiť kedysi veľmi obľúbený tag <blink>. Avšak problémom tohto tagu je, že nie je, ani nikdy nebol štandardizovaný, takže ho podporujú iba niektoré prehliadače.

Skúsil som teda vygúgliť nejaký javascript/jquery kódik, ktorý by to dokázal a fungovalo by to vo všetkých prehliadačoch. Našiel som ich viacero. Ich problémom však bolo neúmerné vyťaženie CPU, ak bolo takéto „blikátko“ na stránke použité viackrát.

Nakoniec som našiel jednoduché CSS, prostredníctvom ktorého dokáže text blikať vo všetkých moderných prehliadačoch bez akéhokoľvek vyťažovania CPU. Stačí teda vložiť do stránky toto CSS a elementu, ktorý má blikať nastaviť class=“blink“.

A tu máme to zázračné CSSko:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

.blink {
-webkit-animation: blink .75s linear infinite;
-moz-animation: blink .75s linear infinite;
-ms-animation: blink .75s linear infinite;
-o-animation: blink .75s linear infinite;
animation: blink .75s linear infinite;
}
 
@-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
 
@-moz-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
 
@-ms-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
 
@-o-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
 
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}