CSS animation not behaving as expected

Question

Problem

I've made a simple css animation, but it's not behaving as I expect it. The idea is for the animation to draw a straight line (from top downwards) , and the disappear (also from the top downwards).

The start of the line moves down a bit, as the animation starts, then up again to stay at set position (same goes for the bottom at the end of the animation).

Question

How do I get the start of the line to stay at one position instead of 'bouncing' down and up?

Expected behavior

Actual behavior

Code

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

Codepen

https://codepen.io/strazan/pen/RwPYgjq

user_8620333 · Answer

The default transform-origin is center so if you omit it in the initial and last state it will be set to center. You need to also have an instant change of the transform-origin in the middle:

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

user_12785869 · Answer

I have made similar CSS animation with some different code lines.

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