animazioni css3 lampeggiante duro (nessuna dissolvenza tra i fotogrammi)

Question

cercando di visualizzare in flash tre elementi di seguito con animazioni css3. ce l'ho, ma c'è una dissolvenza per ogni frame e mi piacerebbe rimuoverlo. idealmente ogni elemento rimane visibile per 1 s, quindi si nasconde immediatamente.

Ho provato impostando l'animazione con cornici a 0% e 99% per opacity:1 e 100% per opacity: 0 ma ancora senza fortuna.

spero che ci sia un modo per rimuovere la dissolvenza!

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

Usare animation-timing-function:

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

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

Ops, appena realizzato il difetto logico.

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

Oltre alla variazione sopra, modificare l'animazione flash al seguente:

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

Il problema è, l'animazione gioca 3 secondi, ma ogni esigenza elemento per rimanere nello stato opacity:0 dopo il secondo numero 1, quindi ho bisogno di dividere l'animazione in 2 fasi (con il rapporto lunghezza tempo 1: 2), in modo che gli elementi possano apparire come se rimanessero nello stadio finale per 2 secondi.

Answer 2

Basta definire l'animazione in modo da mantenere uno stato il più a lungo possibile e quindi passare all'altro il più velocemente possibile. In questo modo:

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

Answer 3

È possibile mantenere l'opacità per il periodo più lungo e cambiarlo molto rapidamente.

Prova questa:

.div 
    animation: blink 1s linear infinite 

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