Question

我有一个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>

Answer 1

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

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

1 个答案: