css3 animations hard blink (no fade inbetween frames)

Question

trying to flash three elements in a row with css3 animations. i've got it running, but there is a fade for each frame and i'd like to remove it. ideally each element stays visible for 1s, then hides immediately.

i've tried setting the animation with frames at 0% and 99% for opacity:1 and 100% for opacity: 0 but still no luck.

i hope theres a way to remove the fade!

webkit js fiddle

CSS:

.motion.play .frame {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
}
    .frame:nth-of-type(2) {
        -webkit-animation-delay: 1s;
    }
    .frame:nth-of-type(3) {
        -webkit-animation-delay: 2s;
    }

    @-webkit-keyframes flash {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

Answer 1

Use proper animation-timing-function:

http://jsfiddle.net/rfGDD/1/ (WebKit only)

.motion.play .frame {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal; /* not "linear" */
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:steps(3, end);
}

MDN document on fill-mode

MDN document on direction

MDN document on steps() timing function

Edit:

Oops, just realized the logical flaw.

Revised: http://jsfiddle.net/rfGDD/3/ (WebKit only)

In addition to the above change, change the flash animation to following:

@-webkit-keyframes flash {
    0% {
        opacity: 1;
    }
    33% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

The problem is, the animation plays 3 seconds, but each element need to stay in the opacity:0 state after second #1, so I need to split the animation into 2 stages (with the timing length ratio 1:2), so elements can look like they stays in final stage for 2 seconds.

Answer 2

Just define your animation so that it keeps one state as long as possible and then switches to the other one as fast as possible. Like this:

@-webkit-keyframes flash {
      0% { opacity: 1; }
     49% { opacity: 1; }
     50% { opacity: 0; }
    100% { opacity: 0; }
}

Answer 3

You may keep the opacity for the longest period and change it very quickly.

Try this:

.blinkMe {
  animation: blink 1s linear infinite;
}

@keyframes blink {
  0%,50% {
    opacity: 0;
  }
  51%,100% {
    opacity: 1;
  }
}