CSS 动画未按预期运行

Question

问题我制作了一个简单的 css 动画，但它的行为并不符合我的预期。这个想法是让动画绘制一条直线（从上向下），然后消失（也是从上向下）。当动画开始时，线的起点向下移动一点，然后再次向上移动以保持在设定位置（动画结束时的底部也是如此）。问题如何让线条的起点停留在一个位置而不是上下“弹跳”？预期行为https://i.stack.imgur.com/NoHZt.gif 实际行为https://i.stack.imgur.com/vqjoU.gif 代码.lineWrapper {  width: 1px;  height: 300px;  margin: auto;  position: relative;}.lineWrapper .line {  width: 100%;  height: 100%;  background: #000;  animation: scrollLine 5s linear infinite;}@keyframes scrollLine {  0% {    transform: scaleY(0);  }  10% {    transform: scaleY(0);    transform-origin: top;  }  30% {    transform: scaleY(1);  }  70% {    transform: scaleY(1);  }  90% {    transform: scaleY(0);    transform-origin: bottom;  }  100% {    transform: scaleY(0);  }}<div class="lineWrapper">  <div class="line"></div></div>代码笔https://codepen.io/strazan/pen/RwPYgjq

Answer 1

默认值为transform-origin居中，因此如果您在初始和最后状态中省略它，它将被设置为居中。您还需要立即更改transform-origin中间的内容：

.lineWrapper {

  width: 1px;

  height: 300px;

  margin: auto;

  position: relative;

}

.line {

  height: 100%;

  background: #000;

  animation: scrollLine 5s infinite;

}

@keyframes scrollLine {

  0%,10% {

    transform: scaleY(0);

    transform-origin: top;

  }

  49.9% {

    transform: scaleY(1);

    transform-origin: top;

  }

  50% {

    transform: scaleY(1);

    transform-origin: bottom;

  }

  90%,100% {

    transform: scaleY(0);

    transform-origin: bottom;

  }

}

<div class="lineWrapper">

  <div class="line"></div>

</div>

Answer 2

我用一些不同的代码行制作了类似的 CSS 动画。

body {

  margin: 0px;

  display: flex;

  justify-content: center;

  background: black;

  overflow: hidden;

}

.line-wrapper {

  height: 800px;

  width: 8px;

  background: tranparent;

  display: flex;

  justify-content: center;

  animation: down 2s linear infinite;

}

@keyframes down {

  0% {

    transform: translateY(0px);

  }

  15% {

    transform: translateY(0px);

  }

  30% {

    transform: translateY(0px);

  }

  60% {

    transform: translateY(90px);

  }

  90% {

    transform: translateY(115px);

  }

  100% {

    transform: translateY(115px);

  }

}

.line {

  height: 8px;

  width: 4px;

  background: Gray;

  animation: scrollLine 2s ease-in-out infinite;

}

@keyframes scrollLine {

  100% {

    height: 800px;

  }

}

.eraser {

  height: 0px;

  width: 4px;

  background: black;

  animation: rmv 2s linear infinite;

}

@keyframes rmv {

  55% {

    height: 0px;

  }

  100% {

    height: 800px;

  }

}

<div class="line-wrapper">

  <div class="line">

    <div class="eraser"></div>

  </div>

</div>