javascript - 在不改变div位置的情况下替换css动画

Question

这是我的代码

https://jsfiddle.net/sameh0/hgk2uLfk/2/

我想在悬停在 div 上时更改 rightleft 的动画。但是，当我这样做时，div 的位置先返回，然后更改动画，这会造成糟糕的交互体验。

也就是说，我愿意添加任何 JS/JQuery 代码。

当前，当 div 悬停时，它会停在其初始位置，并且会出现新动画 bubble。

我的目标是:使 div 停在它的当前位置，新动画 bubble 在 div 停止时开始。

这是代码HTML

<div class="circle"></div>

CSS

 .circle{
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  top:25%;
   left :28%;
  width: 90px;
  height: 90px;
  -webkit-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) , bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
background-color:blue;
  background-size: 80%;
}
.circle:hover{
  background-color:red;
   -webkit-animation: bubble, 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
  -moz-animation: bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
  animation:  bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
}

@-webkit-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@-moz-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@-ms-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}
@-webkit-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@-moz-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@-ms-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

Answer 1

下面的代码怎么样？

.circle{
  background-color:blue;
  animation:
    rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),
    bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
}

.circle:hover{
  background-color:red;
  animation:
    rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),
    bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21);
  animation-play-state: paused, running;
}

@keyframes rightleft {
  0% {
    margin-top: 0px;
    margin-left: 0px;
  }
  100% {
    margin-left: -100px;
    margin-top: -100px;
  }
}

@keyframes bubble {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.1);
  }
}

DEMO