Keyframe Animation - Instant Change

Question

I've started to learn about keyframe animation in CSS3. One think I've noticed is that, no matter how I ""time" things with keyframe animations, the transitions are always smooth.

For example; a background color change from 50% to 100%, is a smooth transition as the animation plays from 50% to 100%.

What I'm trying to achieve is a way of doing the animation with an "instant" type of value change..

Again, an example would be: If 50% value of BG is red and 100% value of BG is blue; the animation should stay red till it reaches to 100% and instantly changes to blue when it is 100% completed.

I'm not sure if my terminology is right or wrong, but some direction would be perfect in any case.

Ingesta

Answer 1

You can use steps as your timing-function to pause the animation until the next keyframe

CSS:

    -webkit-animation-timing-function: steps(1, end);
    -moz-animation-timing-function: steps(1, end);
    -ms-animation-timing-function: steps(1, end);
    -o-animation-timing-function: steps(1, end);
    animation-timing-function: steps(1, end);

Sample code:

@keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -webkit-animation-timing-function: steps(1, end);
        -moz-animation-timing-function: steps(1, end);
        -ms-animation-timing-function: steps(1, end);
        -o-animation-timing-function: steps(1, end);
        animation-timing-function: steps(1, end);
        background-color:blue;
    }
    100% {
        background-color:red;
    }
}
@-o-keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -o-animation-timing-function: steps(1, end);
        background-color:blue;
    }
    100% {
        background-color:red;
    }
}
@-moz-keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -moz-animation-timing-function: steps(1, end);
        background-color:blue;
    }
    100% {
        background-color:red;
    }
}
@-webkit-keyframes quick {
    0% {
        background-color:green;
    }
    50% {
        -webkit-animation-timing-function: steps(1, end);
        background-color:red;
    }
    100% {
        background-color:blue;
    }
}
body {
    height:100%;
    width:100%;
    animation:quick 3s;
    -moz-animation:quick 3s;
    -webkit-animation:quick 3s;
    -o-animation:quick 3s;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

http://jsfiddle.net/sC5fy/1/

Orva

Yes! "steps" exactly! Thank you very much! – Ingesta

Answer 2

I just had this problem and got round it by marking the initial value at the start and then again right before I wanted the change to instantly happen - see below

@-webkit-keyframes image2 {
  0%   {opacity: 1;}
  24.99%   {opacity: 1;}
  25%  {opacity: 0;}
  100% {opacity: 0;}
}

Antitank

Answer 3

Had a kind of similar situation and changing the timing-function worked for me:

.animated-item {
    animation: my-animation 1s;
    animation-timing-function: step-end;
}

The timing function describes how the animation will progress over one cycle of its duration. You can read more about it in this MDN Reference.

Mozellemozes

Answer 4

A very simple solution could be adding background-color: red to your element, and then, in the @keyframes section:

%0 {
  background-color: blue;
}

Try it: jsFiddle

Tunstall

you mean in your own attempt or in the jsFiddle? – Tunstall

Ah, srry about confusion. Your jsFiddle I mean. – Ingesta

@Zettam: I see the same. Your jsFiddle is broken. – Commissioner

Guess it's a browser compatibility issue then. Sorry for that. Works fine in FF18. – Tunstall