Problem with fade effect and pause slider on mouseover

Question

I have modified the script of a slider by inserting a fadein and fadeout animation with CSS. The slider also contains rules for pausing on mouseover.
Everything works correctly until the mouseover: the CSS animation stops, at the mouseleave it resumes and ends, but after the fadeout effect, the slide jumps back into view.
I think the problem may be that, at the mouseleave, the slider restarts the time count from zero, while the animation continues from the second it stopped. I'm not very familiar with Javascript and thank you so much if you can help me solve this problem.

Here is the code:

var slideIndex = 1;
var myTimer;
var slideshowContainer;
var transition_time = 1000;

window.addEventListener("load",function() {
    showSlides(slideIndex);
    myTimer = setInterval(function(){plusSlides(1)}, 4000);
    
    slideshowContainer = document.getElementsByClassName('slideshow-inner')[0];
  
    slideshowContainer.addEventListener('mouseenter', pause)
    slideshowContainer.addEventListener('mouseleave', resume)
})

// NEXT AND PREVIOUS CONTROL
function plusSlides(n){
  clearInterval(myTimer);
  if (n < 0){
    showSlides(slideIndex -= 1);
  } else {
   showSlides(slideIndex += 1); 
  }
  
  if (n === -1){
    myTimer = setInterval(function(){plusSlides(n + 2)}, 4000);
  } else {
    myTimer = setInterval(function(){plusSlides(n + 1)}, 4000);
  }
}


function currentSlide(n){
  clearInterval(myTimer);
  myTimer = setInterval(function(){plusSlides(n + 1)}, 4000);
  showSlides(slideIndex = n);
}

function showSlides(n){
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" dotactive", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " dotactive";
}

pause = () => {
  clearInterval(myTimer);
}

resume = () =>{
  clearInterval(myTimer);
  myTimer = setInterval(function(){plusSlides(slideIndex)}, 4000);
}

.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

.mySlides {
    display: none;
  height: 400px;
  border: solid 1px black;
     
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #222428;
    font-weight: bold;
    font-size: 30px;
    transition: .6s ease;
    border-radius: 0 3px 3px 0
}

.next {
    right: -50px;
    border-radius: 3px 3px 3px 3px
}

.prev {
    left: -50px;
    border-radius: 3px 3px 3px 3px
}

.prev:hover,
.next:hover {
    color: #f2f2f2;
    background-color: rgba(0, 0, 0, 0.8)
}

.text {
    color: #f2f2f2;
    font-size: 15px;
    padding-top: 12px;
  padding-bottom: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #222428
}

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color .6s ease
}

.active,
.dot:hover {
    background-color: #717171
}

.fade{
    animation: fade 4s linear;
    -webkit-animation: fade 4s linear;
}
.fade:hover{
    animation-play-state: paused;
    -webkit-animation-play-state:paused;
}
@keyframes fade {
    0% {opacity: 0.0}
    30% {opacity: 1.0}
    90% {opacity: 1.0}
    100% {opacity: 0.0}
}
@-webkit-keyframes fade {
    0% {opacity: 0.0}
    30% {opacity: 1.0}
    90% {opacity: 1.0}
    100% {opacity: 0.0}
}

<div class="slideshow-container">
  <div class="slideshow-inner">
    <div class="mySlides fade">SLIDE 1</div>
    <div class="mySlides fade">SLIDE 2</div>
    <div class="mySlides fade">SLIDE 3</div>
  </div>
  <a class="prev" onclick="plusSlides(-1)"></a>
  <a class="next" onclick="plusSlides(1)"></a>
  <div class="slider_pagination" style="text-align: center;">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    </div>
</div>