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.

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/

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;}
}