Alternate blinking with CSS3 animation
I'm trying to find a CSS-only way to have individual tags (like p
or img
) blink in alternating patterns. While I was able to find a way to make something blink (see .blinky
) in the example code, I was unable to get the two separate classes to alternate blinking.
Part of the solution could be the property animation-delay
shown in .blinky2
, but after the specified delay in seconds, it syncs with .blinky
and is not compensated for by the delay.
I found some related SO links that got me started - Simulating Shortcut with CSS3 Animation and CSS Tricks - but I haven't seen any instructions yet for defining the blink offset for .blink2
. Is such a thing supported, or does it require additional tricks?
.blinky {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
font-size: x-large;
color: blue;
display: inline;
}
.blinky2 {
/* Need make this alternate blinking*/
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
/* This just postpones blinking for 1-sec, then it in sync with .blinky*/
animation-delay: 1s;
-webkit-animation-delay: 1s;
font-size: x-large;
color: red;
display: inline;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
<p>The <var>blinky</var> and <var>blinky2</var> classes should alternate blinking.</p>
<div>
<p class="blinky">Blinky</p>
<p class="blinky2">Blinky 2</p>
<p class="blinky">Blinky</p>
<p class="blinky2">Blinky 2</p>
<p class="blinky">Blinky</p>
</div>
source to share
The key to alternating blinking is to set the value animation-delay
to half "1s" from animation: blink-animation 1s steps(5, start) infinite
to "0.5s".
I'm not sure what the generic formula would look like, but "0.5s" seems to work for this purpose.
I tested this by letting it run for 10 minutes and still stay flashing in alternation.
So .blinky2
now it looks like this:
.blinky2 {
/* Need make this alternate blinking*/
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
font-size: x-large;
color: red;
display: inline;
}
source to share
I think you could use keyframes to get the effect you want.
What I've done below defines two different animations: blink-animation
and alt-blink-animation
. blink-animation
applies to tags p
and alt-blink-animation
applies to tags div
.
blink-animation
starts with a hidden element and alt-blink-animation
starts with a visible element. Just alternating keyframes, so it is blink-animation
displayed while alt-blink-animation
hidden, and vice versa produces a variable blinking effect.
<p>First blink</p>
<div>Alt Blinking</div>
<style>
p{
animation: blink-animation 1s infinite;
}
div{
animation: alt-blink-animation 1s infinite;
}
@keyframes blink-animation {
0% { opacity: 0;}
100% { opacity: 1;}
}
@keyframes alt-blink-animation {
0% { opacity: 1;}
100% { opacity: 0;}
}
</style>
source to share