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.

user_1034637 · Answer

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

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

user_395910 · Answer

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

user_1942509 · Answer

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

css no animation-timing-function

3 Answers