如何让我的滑动动画从页面边缘开始？答案

【问题标题】：How can I make my sliding animation begin at the edge of the page?如何让我的滑动动画从页面边缘开始？
【发布时间】：2019-05-26 18:51:34
【问题描述】：

我有一个 SVG 图像，我将其动画从左侧滑入框架。

问题是，动画从对象的左边缘开始，而不是页面的左边缘。

如何让动画从页面边缘开始？

当我在对象上添加边距或填充时，它只是从页面边缘开始动画。

当我在 SVG 中添加边距或填充时，它实现了目标，但会切断右侧的 SVG。

HTML 正文：

<body style="background:#3F6184;">
  <div class="full-w">
  <object class="hi" data="static/images/Hi.svg"></object>
 </div>
</body>

svg:

<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">
<style type="text/css">
    .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;
  }
}

</style>
<text transform="matrix(1 0 0 1 0 114.6699)" class="st0 st1 st2">Hi,</text>
</svg>

【问题讨论】：

标签： html css animation svg

【解决方案1】：

向包含body { margin: unset; } 或* { all: unset; } 的HTML 文档添加样式表以删除默认页边距。

【讨论】：