CODEWITHSUNDEEP
htmlcsscss-animationscss-transitions
Strazan
Strazan

Reputation: 147

CSS animation not behaving as expected

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

enter image description here

Actual behavior

enter image description here

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);
  }
}
<div class="lineWrapper">
  <div class="line"></div>
</div>

Codepen

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

Upvotes: 2

Views: 107

Answers (2)

Vigilant Straight
Vigilant Straight

Reputation: 19

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;
  }
}
<div class="line-wrapper">
  <div class="line">
    <div class="eraser"></div>
  </div>
</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272668

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;
  }
}
<div class="lineWrapper">
  <div class="line"></div>
</div>

Upvotes: 3

Related Questions