CSS3 keyframe animation: Set property without animation

Question

I have the following keyframe animation:

@include keyframes(anim1) {
    0% { width: 10%; left: 50%; }
  10% { width: 30%; left: 100%; }
  20% { width: 30%; left: 100%; }
  20% { width: 0%; left: 0%; }
  30% { width: 80%; left: 100%; }
  100% { width: 100%; left: 100%; }
}

At 20% of the animation, the animated div should directly jump to 0% width and 0% left (that's why I set 20% two times), and from that point, the next animations (30% and 100%) should apply. But this doesn't work, my div gets animated form width: 30% -> 0% and left: 100% -> 0%

Is it possible with pure CSS3 animations to "hard set" a divs property to a certain value during a keyframe animation without animating it?

score 1 · Accepted Answer · edited May 23 '17 at 11:50

Try setting your first 20% to 19.99%, so you will have animation like this:

@include keyframes(anim1) {
    0% { width: 10%; left: 50%; }
    10% { width: 30%; left: 100%; }
    19.99% { width: 30%; left: 100%; }
    20% { width: 0%; left: 0%; }
    30% { width: 80%; left: 100%; }
    100% { width: 100%; left: 100%; }
}

In this post @markblythe explains that percentages down to 2 decimal places are possible

CSS3 keyframe animation: Set property without animation

1 Answers1