title: CSS: Using transform translate instead of bottom
body: <p>I am trying to change my keyframe animation for a button that moves something from the bottom of a div to the top. When I animate it using bottom:</p>
  
  <pre><code>@keyframes moveUpWithFade2 {
      from {
          bottom: 0%;
          opacity: 0;
      }
      10% {
          opacity: 1;  
      }
      50% {
          opacity: 1;
      }
      to {
          bottom: 100%;
          opacity: 0;
      }
  }
  </code></pre>
  
  <p>it properly fades in from the bottom of the parent div to the very top. However, if I use transform: <code>translateY(100%)</code> it operates on the dimension of the div that I am trying to animate. So if I have a rectangle that has height 25px, then it will move up 25px. So in order to get the same behavior as bottom, I need to specify really high values of translateY, like so:</p>
  
  <pre><code>@keyframes moveUpWithFade {
      from {
          transform: translateY(0%);
          opacity: 0;
      }
      10% {
          transform:  translateY(-200%);
          opacity: 1;  
      }
      50% {
          transform:  translateY(-1000%);
          opacity: 1;
      }
      to {
          transform: translateY(-2000%);
          opacity: 0;
      }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ebLfzgqk/1/" rel="nofollow noreferrer">JSFiddle link</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
    width: 25px;
    height: 400px;
  }
  
  .rect {
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: skyblue;
  }
  
  .movingDiv {    
      bottom: 0;
      animation: moveUpWithFade 6s linear infinite forwards, animateX 2s ease-in-out 3 alternate;
      overflow: hidden;
  }
  
  @keyframes moveUpWithFade {
      from {
          transform: translateY(0%);
          opacity: 0;
      }
      10% {
          transform:  translateY(-200%);
          opacity: 1;  
      }
      50% {
          transform:  translateY(-1000%);
          opacity: 1;
      }
      to {
          transform: translateY(-2000%);
          opacity: 0;
      }
  }
  
  @keyframes moveUpWithFade2 {
      from {
          bottom: 0%;
          opacity: 0;
      }
      10% {
          opacity: 1;  
      }
      50% {
          opacity: 1;
      }
      to {
          bottom: 100%;
          opacity: 0;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY --&gt;
  
  &lt;div class="parent"&gt;
  &lt;div class="rect movingDiv"&gt;Moving&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In my case the size of the object that I am moving up or down is variable and not hardcoded. Is there a way I could use transform property that operates on the height of the parent div to manipulate the child div?</p>