CODEWITHSUNDEEP
htmlcss
clientprediction
clientprediction

Reputation: 33

css no animation-timing-function

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.

Upvotes: 3

Views: 176

Answers (3)

Itay Gal
Itay Gal

Reputation: 10824

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>

Upvotes: 3

Sinisag
Sinisag

Reputation: 1358

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>

Upvotes: 0

Terry
Terry

Reputation: 66188

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>

Upvotes: 1

Related Questions