Как сделать так, чтобы моя скользящая анимация начиналась с края страницы? - PullRequest
Новая
       26

Как сделать так, чтобы моя скользящая анимация начиналась с края страницы?

0 голосов
/ 29 декабря 2018

У меня есть изображение 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>

1 Ответ

0 голосов
/ 29 декабря 2018

Добавьте таблицу стилей в документ HTML, содержащий body { margin: unset; } или * { all: unset; }, чтобы удалить поля страницы по умолчанию.

...