function blinktext() { var f = document. getElementById(‘announcement’); setInterval(function() { f. style. visibility = (f. style. visibility == ‘hidden’ ? ’’ : ‘hidden’); }, 1000);}
You can rename this anything you like. Just make sure to use the same word in the script and the element id.
The actual delay probably won’t match this value perfectly. It tends to be slightly shorter, but can take longer if your browser is busy with other requests.
Firefox does not support inline CSS for Animations, which is what you need to use make your text blink![4] X Research source
For a CSS document, rel and type will not change. It lets your browser know the format and purpose of the document you’re linking to – a text-based style sheet. href is the name of your file and its . css extension. As long as it is in the same folder as the . html document those are the only two pieces of information needed to connect them.
You can name your class anything you’d like, or use id instead of class, and of course change “Blinking text here” to the text of your choice.
animation-name can be anything you choose, and its actions will be defined separately within the CSS file. animation-duration defines how long the animation takes to complete – if it is not specified, no animation will occur. In the above example, the sequence will take 1. 2 seconds, but you can test different times for faster or slower blinking. animation-iteration-count can either be set to a number – entering 4 means the text would only flash four times on page load and then stop - or “infinite” meaning it will blink forever. if you choose to use id instead of class you will replace . announcement with #announcement
By going from black to translucent, the code appears to blink at the animation-interval you set. You can add different stages using percentages. Instead of from {color: black;} to {color: transparent;} you could enter 0% {color: black;} 50% {color: red;} 100% {color: translucent;} to make the text flash from black to red to translucent. Instead of using color names, you can match the background of your website using the hex code for the color, preceded by a #.
