The vh unit doesn't seem to work with transform: translateY-CodePudding

I have 2 half-page-sized overlays that translate the opposite ways to give the illusion that the screen is opening up. In addition, I want them to stop at about 8% from the viewport top or bottom and not disappear entirely. It doesn't really work with % because on mobile devices with bars and other UI they are get cut off. I have tried to use vh but it just disappears into the viewport edges.

/*default animations*/

.main-transition-overlay1 {
  position: fixed;
  background-color: black;
  z-index: 10;
  height: 50vh;
  top: 0;
  left: 0;
  width: 100%;
  animation-name: page-transition-top;
  animation-duration: 750ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  border-bottom: 4px solid #fff;
  color: #fff;
  box-shadow: 0 0px 1.5px #99ffff, 0 0px 2.5px #99ffff, 0 0px 5.5px #99ffff, 0 0px 10px #0cbfe9, 0 0px 20px #0cbfe9, 0 0px 22px #0cbfe9, 0 0px 25px #0cbfe9, 0 0px 36px #0cbfe9;
}

@keyframes page-transition-top {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-92vh);
  }
}

.main-transition-overlay2 {
  position: fixed;
  background-color: black;
  z-index: 10;
  height: 50vh;
  top: 50vh;
  left: 0;
  width: 100%;
  animation-name: page-transition-bottom;
  animation-duration: 750ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  border-top: 4px solid #fff;
  color: #fff;
  box-shadow: 0 0 1.5px #99ffff, 0 0 2.5px #99ffff, 0 0 5.5px #99ffff, 0 0 10px #0cbfe9, 0 0 20px #0cbfe9, 0 0 22px #0cbfe9, 0 0 25px #0cbfe9, 0 0 36px #0cbfe9;
}

@keyframes page-transition-bottom {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(92vh);
  }
}

<!--main screen transition overlay-->
<div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Your transform value for that should be translateY(42vh) (and -42vh) instead of /-92vh, that's the amount the elements move up/down:

/*default animations*/

.main-transition-overlay1 {
  position: fixed;
  background-color: black;
  z-index: 10;
  height: 50vh;
  top: 0;
  left: 0;
  width: 100%;
  animation-name: page-transition-top;
  animation-duration: 750ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  border-bottom: 4px solid #fff;
  color: #fff;
  box-shadow: 0 0px 1.5px #99ffff, 0 0px 2.5px #99ffff, 0 0px 5.5px #99ffff, 0 0px 10px #0cbfe9, 0 0px 20px #0cbfe9, 0 0px 22px #0cbfe9, 0 0px 25px #0cbfe9, 0 0px 36px #0cbfe9;
}

@keyframes page-transition-top {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-42vh);
  }
}

.main-transition-overlay2 {
  position: fixed;
  background-color: black;
  z-index: 10;
  height: 50vh;
  top: 50vh;
  left: 0;
  width: 100%;
  animation-name: page-transition-bottom;
  animation-duration: 750ms;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  border-top: 4px solid #fff;
  color: #fff;
  box-shadow: 0 0 1.5px #99ffff, 0 0 2.5px #99ffff, 0 0 5.5px #99ffff, 0 0 10px #0cbfe9, 0 0 20px #0cbfe9, 0 0 22px #0cbfe9, 0 0 25px #0cbfe9, 0 0 36px #0cbfe9;
}

@keyframes page-transition-bottom {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(42vh);
  }
}

<!--main screen transition overlay-->
<div>
  <div ></div>
  <div ></div>
</div>