title: CSS3 Transform cutting off shape
body: <p>I have a SVG rect that I am trying to animate to move vertically infinitely so that it looks like it's floating.
  When the rect goes downwards, the bottom looks cut off and becomes thinner, and I can't seem to figure out how to make it so that the full SVG shape is still present while it moves.</p>
  
  <p>Here is my <a href="https://jsfiddle.net/eor6h8nj/" rel="nofollow">JSFiddle</a></p>
  
  <p>HTML:
    </p>
  
  <pre><code>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 828 828" style="enable-background:new 0 0 828 828;" xml:space="preserve"&gt;
  &lt;style type="text/css"&gt;
    .st0{fill:none;stroke:#000000;stroke-width:50;stroke-miterlimit:10;}
  &lt;/style&gt;
    &lt;rect id="box" x="26.9" y="26.1" class="st0" width="777.4" height="777.4"/&gt;
  &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper {
    width:50%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin:0 auto;
    padding-top:5%;
    }
  
    #box {
    transform-origin:center;
    -webkit-animation-name: box;
    -webkit-animation-duration: 15s;
    -webkit-transform-origin:center;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction:alternate;
    animation-direction:alternate;
  }
  
  @-webkit-keyframes box {
    0% { -webkit-transform: translate(0px, 20px); }
    10% { -webkit-transform: translate(0px, -5px); }
    20% { -webkit-transform: translate(0px, 20px); }
    30% { -webkit-transform: translate(0px, -5px); }
    40% { -webkit-transform: translate(0px, 20px); }
    50% { -webkit-transform: translate(0px, -5px); }
    60% { -webkit-transform: translate(0px, 20px); }
    70% { -webkit-transform: translate(0px, -5px); }
    80% { -webkit-transform: translate(0px, 20px); }
    90% { -webkit-transform: translate(0px, -5px); }
    100% { -webkit-transform: translate(0px, 20px); }
  }
  </code></pre>
  
  <p>Thank you - I really appreciate it!</p>