Alternate blinking with CSS3 animation

Question

I am trying to find a CSS-only way to make specific tags (like p or img) blink in alternating patterns. While I have been able to find a means to make anything blink (see .blinky) in code sample, I have not been able to make two separate classes alternate the blinking.

Part of the solution might be the animation-delay property shown in .blinky2, but after the specified delay in seconds, it blinks in sync with .blinky and not offset by the delay.

I found some related SO links that got me started -- Imitating a blink tag with CSS3 animations and CSS Tricks -- but I have not yet seen any instructions to define offset blinking for .blink2. Is such a thing supported, or does it require further 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's 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>

katniss.everbean · Answer 1 · 2017-07-06T22:09:30.137

1

I think you could use keyframes to get the effect you're after.

What I've done below is define two different animations, blink-animation and alt-blink-animation. blink-animation gets applied to p tags, and alt-blink-animation gets applied to div tags.

blink-animation starts with the element hidden, and alt-blink-animation starts with the element visible. Simply alternating the keyframes so blink-animation is visible while alt-blink-animation is hidden and vice versa produces an alternating 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>

edited Jul 06 '17 at 22:09

answered Jul 06 '17 at 22:04

katniss.everbean

550
2
9

So close. At first, it blinked alternately. But when I left it blinking and came back to the desk, it was blinking in sync. – RandomHandle Jul 06 '17 at 22:23
How long did it take to see it sync up, and which browser are you using? I've left this running in FireFox for probably five minutes and it's still alternating. Wondering if I'm missing something, or if syncing is browser related. – katniss.everbean Jul 07 '17 at 15:20
It could be browser. I'm using Chrome and writing for a work environment that exclusively uses Chrome. – RandomHandle Jul 07 '17 at 16:09
Been running the same code in Chrome for a couple of hours and it's still alternating. Weird. Is your blinking pattern more complicated than the example? Or is there more relevant code that might be contributing to the difference? – katniss.everbean Jul 07 '17 at 18:57
I kept it all text to keep it simple, but in reality, `.blinky2` is blinking a div containing an image. – RandomHandle Jul 07 '17 at 19:24

RandomHandle · Accepted Answer · 2017-07-06T22:56:47.240

The key to alternating blinking lies in setting up the animation-delay value to half of the "1s" in animation: blink-animation 1s steps(5, start) infinite to "0.5s".

I'm not sure what a generalized formula would look like, but for this purpose "0.5s" seems to work.

I tested this by letting it run for 10 minutes, and still remained blinking in alternation.

So .blinky2 now 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;
}

Alternate blinking with CSS3 animation

2 Answers2