title: How can I make my sliding animation begin at the edge of the page?
body: <p>I have an SVG image that I animated sliding from the left into the frame.</p>
  
  <p>The problem is, the animation begins at the left edge of the object, and not the left edge of the page.</p>
  
  <p>How can I make the animation begin at the edge of the page?</p>
  
  <p>When I add margin or padding on the object, it just starts the animation further from the edge of the page. </p>
  
  <p>When I add margin or padding inside the SVG, it accomplishes the goal but cuts off the SVG on the right.</p>
  
  <p>HTML Body:</p>
  
  <pre><code>&lt;body style="background:#3F6184;"&gt;
    &lt;div class="full-w"&gt;
    &lt;object class="hi" data="static/images/Hi.svg"&gt;&lt;/object&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>svg:</p>
  
  <pre><code>&lt;svg version="1.1" id="hi" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 160.562 148.92" style="enable-background:new 0 0 160.562 148.92;" xml:space="preserve"&gt;
  &lt;style type="text/css"&gt;
      .st0{fill:#FFFFFF;}
      .st1{font-family:'MyriadPro-It';}
      .st2{font-size:137px;}
      .st3{letter-spacing:4;}
      #hi {
      -webkit-animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
              animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  }
      @-webkit-keyframes slide-in-blurred-left {
    0% {
      -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
              transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
      -webkit-transform-origin: 100% 50%;
              transform-origin: 100% 50%;
      -webkit-filter: blur(40px);
              filter: blur(40px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0) scaleY(1) scaleX(1);
              transform: translateX(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-blurred-left {
    0% {
      -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
              transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
      -webkit-transform-origin: 100% 50%;
              transform-origin: 100% 50%;
      -webkit-filter: blur(40px);
              filter: blur(40px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0) scaleY(1) scaleX(1);
              transform: translateX(0) scaleY(1) scaleX(1);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
      -webkit-filter: blur(0);
              filter: blur(0);
      opacity: 1;
    }
  }
  
  &lt;/style&gt;
  &lt;text transform="matrix(1 0 0 1 0 114.6699)" class="st0 st1 st2"&gt;Hi,&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>