更改悬停时的动画速度

Posted 2023-03-06

【中文标题】更改悬停时的动画速度

【英文标题】：Change Animation speed on hover

【发布时间】：2014-07-01 08:50:57

【问题描述】：

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

#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%;"  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>

【问题讨论】：

有趣，我预计悬停更改会起作用。

【参考方案1】：

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

DEMO

.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%;"  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 启发的

【讨论】：

不错。为什么what I tried in this fiddle 不起作用？但是this fiddle does!

@ChrisM 在你的小提琴中，课程正在切换，但你不能覆盖这样的动画速度。

我不明白为什么。我什至尝试过 addClass 和 removeClass。如果javascript剥离当前类，不应该把原来的动画速度去掉，然后引入一个不同速度的新类吗？

@ChrisM .removeClass 似乎工作见这里：jsfiddle.net/webtiki/XE5xm/41

@ChrisM 是的，我刚试过，你是对的......不知道为什么，我得再挖掘一下