css pseudo element with infinite animation overflow the body

Question

I am trying to create a nice background with texts as css pseudo element that are moving down with css animation. It s working great excepting that once the text has reach the bottom of the body it keep going and make the overall heigh of the page longer. I would like my text to keep going down and get hidden by the end of the page.

.bgquote1 {
  position: relative;
}


.bgquote1::after {
  content:
  "I don't aim for perfection. But I do want to try and\A come up with something interesting. -Kate Bush";
  font-family: "Palatino";
  top: 10000px;
  left: 20px;
  transform: rotate(-90deg);
  z-index: -1;
  white-space: pre-wrap;
  animation: nudge2 5900s linear infinite alternate;
  position: absolute;
}

https://jsfiddle.net/p6wmeftg/1/

please see in the exemple the text at the bottom that keep going down and making the page longer with there is nothing anymore to show

Answer 1

Add this style to your .quotewrapper class and be sure that your html and body have a position:relative without a fixed height:

html, body {
  position: relative;
  height: auto;
}
.quotewrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Your edited JSFiddle