Question

我有一个带有文字的简单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;
}

Answer 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上时，都应该适用于缩放。

干杯。

悬停时的动画仅在第一次起作用

1 个答案: