CSS3 animation of hard flashing (no fading between frames)

Question

trying to release three elements in a line with css3 animation. It works for me, but there is a damping for each frame, and I would like to delete it. Ideally, each element remains visible for 1 s, then hides immediately.

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

I hope this is a way to remove fading!

webkit js violin

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 the correct animation-timing-function :

http://jsfiddle.net/rfGDD/1/ (only for 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 in steps() the synchronization function

Edit

Oops, just realized a logical flaw.

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

In addition to the above change, change the flash animation as follows:

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

The problem is that the animation plays for 3 seconds, but each element must remain in opacity:0 after the second # 1, so I need to divide the animation into 2 stages (with a ratio of length 1: 2), so the elements may look like they remain in the final stage for 2 seconds.

Answer 2

Just define your animation so that it retains one state for as long as possible, and then switches to another as quickly as possible. Like this:

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

Answer 3

You can maintain opacity for the longest period and change it quickly.

Try the following:

 .div animation: blink 1s linear infinite @keyframes blink 0%,50% opacity: 0 51%,100% opacity: 1