html - Problems with animation in Firefox

Question

There's a simple animation https://ektx.000webhostapp.com/firefox-animation/. Everything works fine in all browsers, but in Firefox, when pointing at a gray field, the circle twitches. Someone can tell me how to fix it so that the animation is smooth and in Firefox too.

$('#section').on('mousemove', function(e) {
   let y = e.pageY - $(this).offset().top - ($(this).height()/2);
   let x = e.pageX - $(this).offset().left - ($(this).width()/2);
   x = x * 0.1; y = y * 0.1;
   $('.circle').css({ 'transform': 'translate( '+ x + 'px, ' + y + 'px)' });
});

.section {
  width: 100%;
  height: 100vh;
  background-color: #ebebeb;
  z-index: 1;
}

.circle {
  position: absolute;
  left: 45%;
  top: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #2a3138;
  transition: 1.5s ease-out all;
}

.field {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 100px;
  height: 100px;
  width: 70%;
  background-color: #7d7f89;
}

.line {
  position: relative;
  top: -5px;
  display: inline-block;
  width: 0;
  height: 10px;
  background-color: #2a3138;
  transition: 1.5s ease-out all;
}

.field:hover .line {
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section" id="section">
  <div class="circle"></div>
    <div class="field">
      <span class="line"></span>
    </div>
</div>

question from:https://stackoverflow.com/questions/66063983/problems-with-animation-in-firefox

Answer 1

Waitting for answers