css no animation-timing-function

Question

How do I make the animation switch frames directly? There's has to be no timing-function like linear or whatsoever. I need the frames to switch directly between frames without going through any in between values.

eg:

0% -> top: 20px
100% -> top: 400px

Should directly go to 400px in time t without going through 100, 200, 245 or what ever.

Answer 1

You can use animation delay:

.a{
    width: 50%;
    height: 100px;
    position: absolute;
    top: 20px;
    background-color: #1F8CCA;
    margin-top: 20px;
    
    animation:anim 0s 1;
    -webkit-animation:anim 0s 1;
    animation-fill-mode: forwards;
    
    animation-delay:2s;
    -webkit-animation-delay:2s; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;
    
} 

@keyframes anim{
    from {top: 20px;}
    to {top: 400px;}
}

@-webkit-keyframes anim{
    from {top: 20px;}
    to {top: 400px;}
}

<div class="a">
<div>

You can define multiple animations with different delays. Not sure it's the best way, but it works.

.a{
    width: 50%;
    height: 100px;
    position: absolute;
    top: 20px;
    background-color: #1F8CCA;
    margin-top: 20px;
    
    animation:anim 0s 1, anim-back 0s 1, anim 0s 1;
    -webkit-animation:anim 0s 1, anim-back 0s 1, anim 0s 1;
    animation-fill-mode: forwards;
    
    animation-delay:1s, 2s, 3s;
    -webkit-animation-delay:1s, 2s, 3s; /* Safari and Chrome */
    
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
} 

@keyframes anim{
    from {top: 20px;}
    to {top: 400px;}
}

@-webkit-keyframes anim{
    from {top: 20px;}
    to {top: 400px;}
}

@keyframes anim-back{
    from {top: 400px;}
    to {top: 20px;}
}

@-webkit-keyframes anim-back{
    from {top: 400px;}
    to {top: 20px;}
}

<div class="a">
<div>

Answer 2

You can also use step-end as the animation-timing-function. It basically tell CSS to render the element at its initial state until the time runs out, and then immediately render the end state. According to Mozilla's documentation:

The animation stays in its initial state until the end, at which point it jumps directly to its final state. This keyword represents the timing function steps(1, end).

div.box {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 40px;
  animation-name: changePosition;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#a {
  left: 0;
  background-color: red;
  animation-timing-function: linear;
}

#b {
  left: 50px;
  background-color: green;
  animation-timing-function: step-end;
}

@keyframes changePosition {
  0% {
    top: 40px;
  }
  100% {
    top: 200px;
  }
}

<div id="a" class="box"></div>
<div id="b" class="box"></div>