jQuery анимация изображения SVG - переход от текущей позиции к другой

Question

Я пытаюсь изменить положение изображения SVG с помощью transform: translate и анимировать это движение.

jQuery(function($) {

  setTimeout(function() {
    $('#svg-logo').addClass("moveToTop");
  }, 8000);

});

#svg-logo {
  max-width: 45vw;
  transition: all 1000ms ease;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  &.moveToTop {
    transform: translate(0, 0);
    max-width: 250px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-element elementor-element-1dae199 elementor-widget elementor-widget-html" data-id="1dae199" data-element_type="widget" data-widget_type="html.default">
  <div class="elementor-widget-container">
    <object id="svg-logo" type="image/svg+xml" data="file.svg"></object>
  </div>
</div>

Проблема

При загрузке страницы lo go находится в середине экран. Через 8 секунд я хочу анимировать движение в верхнее левое положение, чтобы разместить его как basi c lo go и уменьшить его. Как я могу установить translate(0,0) как абсолютные значения? Является ли это возможным?

Я попробовал также возможность position:absolute;left:50px;top:50px, но мне нужно переместиться из текущей позиции в позицию Y. Как мне этого добиться?

Answer 1

Я сделал это для тебя. Вы просто должны изменить свои HTML и CSS, а также значения, которые вы хотите анимации.

    $(document).ready(function(){
        setTimeout(function(){
               $('.move-box').animate({top: "10px", left: "10px" }); 
        },5000);
    });

.move-box{
    width: 100px;height: 100px;background-color: red;
    position: absolute;
    left: 100px;top: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<div class="move-box"></div>