Tweak required if i may ask.

[theremotedr]

I am using the code below.
Currently its blinking on & off on & off etc etc
What i would like is a tweak/extra code added so it blinks on then the text stays visable for a while then off etc etc
The visable text part would need some kind of code so i can change a value to then have it say 1 second visable or 2 seconds visable etc.
Many thanks.


<!--===========================================================-->
<!-- Blinking code below -->
<!--===========================================================-->
#fast {
animation: blink 300ms linear infinite;
-moz-animation: blink 300ms linear infinite;
-webkit-animation: blink 300ms linear infinite;
text-align: center;
}

#regular {
animation: blink 750ms linear infinite;
-moz-animation: blink 750ms linear infinite;
-webkit-animation: blink 750ms linear infinite;
text-align: center;
}

#slow {
animation: blink 1500ms linear infinite;
-moz-animation: blink 1500ms linear infinite;
-webkit-animation: blink 1500ms linear infinite;
text-align: center;
}

@keyframes blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
@-moz-keyframes blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
@-webkit-keyframes blink { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} }
<!--============================================================-->
<!-- End blinking code -->
<!--============================================================-->



<u><b><font face="Arial Black" size="5" color="#FFFFFF"><div id="slow">
** PUT YOUR TEXT TO FLASH HERE **</div></font></b></u>

[Beverleyh]

Moderators Note - you've been on the forum a while now so please remember to use the BB code buttons to format your code otherwise persistent failure to do so may result in the issue of infraction points.

Formatting your code helps with the readability of a post, and can affect response time (posts that are easier to read tend to be answered faster)

If you are unsure which formatting button to use, or if you are in the 'Quick Reply' window, head for the hash '#' - when you hover over it, a tooltip appears saying "Wrap [CODE] tags around selected text".


I've moved your thread from the Java to the CSS forum, because these animations are done using CSS3.

Here are CSS3 animations for approx 1-second and 2-second flashes;

CSS
#one-sec {
animation: one-sec 1500ms linear infinite;
-moz-animation: one-sec 1500ms linear infinite;
-webkit-animation: one-sec 1500ms linear infinite;
-o-animation: one-sec 1500ms linear infinite;
text-align: center;
}
@keyframes one-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
@-moz-keyframes one-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
@-webkit-keyframes one-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
@-o-keyframes one-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }

#two-sec {
animation: two-sec 2500ms linear infinite;
-moz-animation: two-sec 2500ms linear infinite;
-webkit-animation: two-sec 2500ms linear infinite;
-o-animation: two-sec 2500ms linear infinite;
text-align: center;
}
@keyframes two-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
@-moz-keyframes two-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
@-webkit-keyframes two-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }
@-o-keyframes two-sec { 0% {opacity:0;} 10% {opacity:1;} 90% {opacity:1;} 100% {opacity:0;} }


HTML
<div id="one-sec">** PUT YOUR TEXT TO FLASH HERE - APPROX 1 SECOND VISIBLE BETWEEN FLASHES **</div>
<div id="two-sec">** PUT YOUR TEXT TO FLASH HERE - APPROX 2 SECONDS VISIBLE BETWEEN FLASHES **</div>

The time sequence for each animation is highlighted red.

As for extending the time that the text is visible for, that needs to be done with the keyframes, highlighted blue - change to full opacity at around the 10% mark in the animation sequence, and then change back to 0 opacity from the 90% mark, makes the text visible for roughly 80% of the time during each animation loop (well, a bit less if you take out the time for the actual colour transition).

EDIT: I've also added Opera-specific definitions with the "-o-" vendor prefix, just to make sure you're covered there.