css3 animations hard blink (no fade inbetween frames)
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;
}
}
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; }
}
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.