Twarde mignięcia css3 (bez zanikania pomiędzy klatkami)

Question

próbuje błyskać trzy elementy z rzędu animacjami css3. Mam go uruchomione, ale jest zanikanie dla każdej ramki i chciałbym go usunąć. idealnie każdy element pozostaje widoczny przez 1s, a następnie natychmiast się chowa.

Próbowałem ustawienie animacji z ramkami na 0% i 99% dla opacity:1 i 100% dla opacity: 0 ale nadal nie szczęścia.

Mam nadzieję, że jest sposób na usunięcie zaniku!

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

Zastosowanie właściwego animation-timing-function:

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

.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:

Ups, właśnie realizowany logiczną wadę.

poprawiona: http://jsfiddle.net/rfGDD/3/ (tylko WebKit)

Oprócz wyżej zmiany zmiana animacji flash do następujących:

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

Problemem jest animacja odgrywa 3 sekundy, a każdy element zapotrzebowanie pozostać w stanie opacity:0 po drugim numerze 1, więc muszę podzielić animację na 2 etapy (ze współczynnikiem czasu 1: 2), aby elementy mogły wyglądać tak, jakby pozostały w końcowej fazie przez 2 sekundy.

Answer 2

Po prostu zdefiniuj swoją animację, aby zachować jak najdłużej jeden stan, a następnie przełącz się na drugi tak szybko, jak to możliwe. W ten sposób:

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

Answer 3

Możesz zachować krycie przez najdłuższy okres i bardzo szybko go zmienić.

Spróbuj tego:

.div 
    animation: blink 1s linear infinite 

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