更改悬停时的动画速度

2022-01-22 00:00:00 hover css css-animations

我正在构建一个行星系统，它可以悬停在轨道上并且动画速度会发生变化.
我用 onMouseOver 和 .hover jquery 进行了尝试，但我不知道为什么它不起作用.

I'm building a planetsystem, where it is possible to hover over the orbit and the animation speed changes.
I tried it with the onMouseOver and .hover jquery, but I couldn't figure out why it wasnt working.

#universum-planet1 {
  position: absolute;
  height: 250px;
  width: 250px;
  top: 40%;
  left: 50%;
  margin-left: -125px;
  margin-top: -65px;
  z-index: 1;
  border: 1px solid #989898;
  -webkit-border-radius: 225px;
  -moz-border-radius: 225px;
  border-radius: 225px;
  -webkit-animation: spin 15s linear infinite;
  -moz-animation: spin 15s linear infinite;
  animation: spin 15s linear infinite;
  -moz-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
#planet1 {
  position: absolute;
  top: 5%;
  left: 5%;
  height: 50px;
  width: 50px;
  z-index: 2;
  -webkit-animation: spin 30s linear infinite;
  -moz-animation: spin 30s linear infinite;
  animation: spin 30s linear infinite;
  -moz-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<div id="universum-planet1">
  <div id="planet1">
    <a href="universe.html" id="enterLink">
      <img class="enter" src="http://webmaths.files.wordpress.com/2009/03/soccerball1.png" style="height:100%;" alt="" onMouseOver="this.src='http://www.rsg-shop.com/images/Ball-PASTORELLI-Giallo-Fluo-00014-0.jpg';" onMouseOut="this.src='http://webmaths.files.wordpress.com/2009/03/soccerball1.png'"
      />
    </a>
  </div>
</div>

推荐答案

此解决方案使用具有相同关键帧动画(反转)的轨道包装器，它暂停/运行以更改悬停时的动画速度 :

This solution uses a wrapper for the orbit with the same keyframe animation (reversed) which pauses/runs to change the animation speed on hover :

演示

.wrapper{
  position:absolute;
  top:40%; left:50%;
  margin-left:-125px;
  margin-top:-65px;
  width: 250px; height:250px;

  -webkit-animation:spin 20s linear infinite;
  -moz-animation:spin 20s linear infinite;
  animation:spin 20s linear infinite;

  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;

  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}

#universum-planet1 {
  height:250px; width: 250px;
  z-index:1;
  border: 1px solid #989898;
  border-radius: 225px;
  -webkit-animation:spin 15s linear infinite;
  -moz-animation:spin 15s linear infinite;
  animation:spin 15s linear infinite;
  -moz-transform-origin:center center;
  -webkit-transform-origin:center center;
  transform-origin:center center;
}
#planet1 {
  position:absolute;
  top:5%; left:5%;
  height: 50px; width: 50px;
  z-index:2;
  -webkit-animation:spin 30s linear infinite;
  -moz-animation:spin 30s linear infinite;
  animation:spin 30s linear infinite;
  -moz-transform-origin:center center;
  -webkit-transform-origin:center center;
  transform-origin:center center;
}
.wrapper:hover{
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  animation-play-state: running;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<div class="wrapper">
  <div id="universum-planet1">
    <div id="planet1"> <a href="universe.html" id="enterLink">
      <img class="enter" src="http://webmaths.files.wordpress.com/2009/03/soccerball1.png" style="height:100%;" alt="" onMouseOver=   "this.src='http://www.rsg-shop.com/images/Ball-PASTORELLI-Giallo-Fluo-00014-0.jpg';" onMouseOut="this.src='http://webmaths.files.wordpress.com/2009/03/soccerball1.png'" /></a> 
    </div>
  </div>
</div>

这受到 this answer 的启发，作者为 Vals

This was inpired by this answer by Vals

相关文章