html - 从那里离开光标时如何避免背景动画回到它的初始点？

Question

悬停时，此 div 的背景图像开始播放动画。但是当你把光标移开时，它会回到它的初始点。我怎样才能让它停留在悬停时停止的位置？

div {
  width:100%;
  height:200px;
  background:indigo;
  background-image:url('https://abrilexame.files.wordpress.com/2016/11/aurora_borealis_i.jpg?quality=70&strip=info')
}

div:hover {
  -webkit-animation: backgroundScroll 5s ease 1;
  -webkit-animation-fill-mode: forwards;
  animation: backgroundScroll 5s ease 1;
  animation-fill-mode: forwards;
}


@keyframes backgroundScroll {
    from {background-position: 0 0;}
    to {background-position:0px -180px ;}
}

@-webkit-keyframes backgroundScroll {
    from {background-position: 0 0;}
    to {background-position:0px -180px ;}
}

<div>

</div>

Answer 1

将动画设置为基础状态，播放状态暂停。

悬停时，将其设置为运行

div {
  width:100%;
  height:200px;
  background:indigo;
  background-image:url('https://abrilexame.files.wordpress.com/2016/11/aurora_borealis_i.jpg?quality=70&strip=info');
  animation: backgroundScroll 5s ease 1;
  animation-play-state: paused;
  animation-fill-mode: forwards;
}

div:hover {
  -webkit-animation: backgroundScroll 5s ease 1;
  -webkit-animation-fill-mode: forwards;
  animation-play-state: running;
}


@keyframes backgroundScroll {
    from {background-position: 0 0;}
    to {background-position:0px -180px ;}
}

@-webkit-keyframes backgroundScroll {
    from {background-position: 0 0;}
    to {background-position:0px -180px ;}
}

<div>

</div>