如何让这个圆圈只到css的屏幕底部？

Question

So I have this code.

@keyframes anim{
  0% {background-color: red; top: 0px; }
  100% {background-color: yellow; top: 800px;}
}

#circle {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background-color: red;
  animation-name: anim;
  animation-duration: 3s;
  position: relative;

}

The circle is a div element. This animation makes it to go down by 800px. But I want to make to go down only as much as is the size of the browser and then to stop. So that no scroll appears. I need to do this with CSS ONLY. Is there any way to do so?

Answer 1

You can use:

top: 100vh

where 100vh means 100% of the vertical viewport height. Also, if you don't want a scroll on the page, you can either set "overflow: hidden" on the body or make the circle stop just in time:

top: calc(100vh - 100px)

Example: https://jsfiddle.net/4sjf2t9y/

Answer 2

You can animate as a percentage rather than as pixels. The problem is, you can't say 100% minus the height of the element with just top or bottom ( edit my bad, turns out you can! see other answer).

But you can animate it to top:100% which would push it off the end of the page, then use translateY (different to top ) to bring it back. See below:

html, body{
  height:100%;
}

@keyframes anim{
  0% {background-color: red; top: 0%; transform:translateY(0px); }
  100% {background-color: yellow; top: 100%; transform:translateY(-100px);}
}

#circle {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background-color: red;
  animation-name: anim;
  animation-duration: 3s;
  position: relative;

}

See demo here: http://codepen.io/EightArmsHQ/pen/avKwRr

Answer 3

You can viewport percentages:

@keyframes anim{
  0% {background-color: red; top: 0px; }
  100% {background-color: yellow; top:100vh;}
}

#circle {
  height: 100px;
  width: 100px;
  border-radius: 50px;
  background-color: red;
  animation-name: anim;
  animation-duration: 3s;
  position: relative;

}

but since your ball will go outside the frame when you put it at 100vh. Use like 80.