Question

如何直接制作动画切换帧？不必像线性或任何其他时序函数。我需要框架直接在框架之间切换，而无需在任何值之间进行切换。

例如：

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

应该直接在时间t转到400px，而不经过100、200、245或任何其他时间。

Answer 1

您可以使用动画延迟：

.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>

您可以定义具有不同延迟的多个动画。不确定这是最好的方法，但是它是否有效。

.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

您也可以将step-end用作animation-timing-function。它基本上告诉CSS将元素以其初始状态呈现，直到时间用完，然后立即呈现结束状态。根据Mozilla的文档：

动画将保持其初始状态直至结束，这时动画将直接跳至其最终状态。此关键字表示计时功能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

在这种情况下，您不需要动画。您只能有2个CSS类，并在需要时使用JS切换它们。这样...您可以修改TIME_TO_WAIT来将时间更改为您喜欢的时间。

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>

CSS没有动画定时功能

3 个答案: