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

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; }
}