CSS动画中两个步骤之间的平滑转换

quanwei li

有我的代码，我想在两个步骤框架之间进行过渡。

我在div选择器中添加了转换但没有任何反应

transition: top .3s ease;
animation: animate-top steps(6) 10s infinite;

https://codepen.io/Qquanwei/pen/RzBdBb?editors=1100

<section>
  <div>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
  </div>
</section>

section {
  position: relative;
  background: orange;
  overflow: hidden;
  height: 60px;
}
div {
  position: absolute;
  top: 0;
  height: 120px;
  transition: top .3s ease;
  animation: animate-top steps(6) 10s infinite;
}
@keyframes animate {
  from {
    top: 0;
  }
  to{
    top: -120px;
  }
}

克莱尔

您将需要在此处更改使用关键帧的方式。您需要将top位置（120）除以所需的步数（在本例中为7，而不是6），然后将其分解为单独的关键帧步。在这种情况下，每个关键帧步骤占总过渡的16.66％。

另外，您将需要从css for中的关键帧调用中删除步骤声明div，因为您不再需要这样做。

将您的divCSS更改为此：

div {
  position: absolute;
  top: 0;
  height: 120px;
  transition: top 3s ease;
  animation: animate-top 10s infinite;
}

将您的keyframesCSS更改为此：

   @keyframes animate-top {
      0% {
        top:0px;
      }
      16.66% {
        top:-20px;
      }
      33.33% {
        top:-40px;
      }
      50% {
        top:-60px;
      }
      66.66% {
        top:-80px;
      }
      83.33%{
        top:-100px;
      }
      100% {
        top:-120px;
      }
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。