9

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;
        }
    }
technopeasant
  • 7,809
  • 31
  • 91
  • 149

3 Answers3

17

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; }
}
mbirth
  • 372
  • 2
  • 8
6

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.

Passerby
  • 9,715
  • 2
  • 33
  • 50
  • thanks for the answer! understand what you're saying about fill-mode and direction, but see an issue with steps. as per your fiddle, there are definitely three stages to the animation, but it's just getting darker and darker. instead, it should be flashing solid red, green, blue without fading or losing brightness. if i comment out the timing function, it does better at simply flashing each color, but has the 100% to 0 opacity fade i'm looking to avoid. any thoughts? – technopeasant Mar 18 '13 at 03:49
  • @technopeasant Oops, my mistake. I've updated my answer, please check! – Passerby Mar 18 '13 at 04:02
3

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;
  }
}
Jake Wilcox
  • 176
  • 1
  • 2
  • 11
Kande Bonfim
  • 31
  • 1