Translate X and Y percentage values based on elements height and width?

Question

Translating an elements Y axis 50% will move it down 50% of its own height, not 50% of the parents height as I would expect. How do I tell a translating element to base it\'

Answer 1

You can use vw and vh to translate based on the viewport size

@keyframes bubbleup {
  0% {
    transform: translateY(100vh);
  }

  100% {
    transform: translateY(0vh);
  }
}