css no animation-timing-function - html

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>

Answer 3

In that case, you don't need an animation. You can just have 2 css classes and toggle them with JS when needed. Like this...you can modify TIME_TO_WAIT to change the time to what you like.
const item = document.getElementById('target-item');
const TIME_TO_WAIT = 1000; // this is in ms
setTimeout(() => {
item.classList.add('container__item--moved');
}, TIME_TO_WAIT);
.container {
position: relative;
width: 100%;
height: 200px;
background: lightblue;
}
.container__item {
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background: red;
}
.container__item--moved {
top: 100px;
}
<div class="container">
<div id="target-item" class="container__item">
</div>
</div>