悬停时的动画只有第一次作品

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

来源

2013-01-11 user1393984

@ChristianVarga请更改以上评论以回答。 –

@JustinJohn我的评论可能不是一个答案，他可能已经为特定的原因设置了填充模式，这会导致我的评论不正确。 –

我使用的是animated.css的CSS＆我接受了所有为我工作并帮助过我的答案。没有理由不礼貌。 – user1393984

您可以用一点点的Javascript达到自己的目标。

你可以，你想有动画悬停添加动画类（田田）到您的股利。当然，当你移出鼠标光标时，你必须删除动画类（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-13 18:55:46

悬停时的动画只有第一次作品

回答

相关问题