1

我有一个简单的 DIV，其中包含在悬停时动画的文本。唯一的问题是它只执行一次，如果用户再次将鼠标悬停在它上面，它不会执行任何操作，直到页面重新加载。

有什么我可以做的，让它每次悬停时都会动画，而无需用户刷新？

CSS

.animated2:hover {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}

@-webkit-keyframes tada {
0% {-webkit-transform: scale(1);}   
10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
0% {-moz-transform: scale(1);}  
10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
100% {-moz-transform: scale(1) rotate(0);}
}

@-o-keyframes tada {
0% {-o-transform: scale(1);}    
10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
100% {-o-transform: scale(1) rotate(0);}
 }

@keyframes tada {
0% {transform: scale(1);}   
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
}

.tada {
-webkit-animation-name: tada;
-moz-animation-name: tada;
-o-animation-name: tada;
animation-name: tada;
}
4

1 回答 1

1

您可以通过使用一点点 Javascript 来实现您的目标。

您可以将悬停时的动画类（tada）添加到您想要动画的 div 中。当然，当您移出鼠标光标时，您必须删除动画类（tada）。

我没有尝试过旋转，但你也可以在没有 Javascript 的情况下进行缩放。

例如：

.animated2 {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}

.animated2:hover {  
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05); 
}

每次在 div 上移动光标时都应该适用于缩放。

干杯。

于 2014-06-13T18:55:46.200 回答