甚至當懸停時，讓css3動畫播放？

當您將鼠標懸停在我的網站上時，我的小菜單徽標會擺動。它看起來非常好，但理想情況下，id很喜歡讓動畫首先播放。這是即時通訊使用的是什麼：甚至當懸停時，讓css3動畫播放？

繼承人我的代碼：

$(function() { 
    $('.logo').hover(function(){$(this).addClass('animated swing')},function(){$(this).removeClass('animated swing')}); 
});

CSS3

.animated { 
    -webkit-animation-duration: 1s; 
     -moz-animation-duration: 1s; 
     -ms-animation-duration: 1s; 
     -o-animation-duration: 1s; 
      animation-duration: 1s; 
    -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-keyframes swing { 
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 
    20% { -webkit-transform: rotate(15deg); } 
    40% { -webkit-transform: rotate(-10deg); } 
    60% { -webkit-transform: rotate(5deg); }  
    80% { -webkit-transform: rotate(-5deg); } 
    100% { -webkit-transform: rotate(0deg); } 
} 

@-moz-keyframes swing { 
    20% { -moz-transform: rotate(15deg); } 
    40% { -moz-transform: rotate(-10deg); } 
    60% { -moz-transform: rotate(5deg); } 
    80% { -moz-transform: rotate(-5deg); } 
    100% { -moz-transform: rotate(0deg); } 
} 

@-ms-keyframes swing { 
    20% { -ms-transform: rotate(15deg); } 
    40% { -ms-transform: rotate(-10deg); } 
    60% { -ms-transform: rotate(5deg); }  
    80% { -ms-transform: rotate(-5deg); } 
    100% { -ms-transform: rotate(0deg); } 
} 

@-o-keyframes swing { 
    20% { -o-transform: rotate(15deg); }  
    40% { -o-transform: rotate(-10deg); } 
    60% { -o-transform: rotate(5deg); } 
    80% { -o-transform: rotate(-5deg); }  
    100% { -o-transform: rotate(0deg); } 
} 

@keyframes swing { 
    20% { transform: rotate(15deg); } 
    40% { transform: rotate(-10deg); } 
    60% { transform: rotate(5deg); }  
    80% { transform: rotate(-5deg); } 
    100% { transform: rotate(0deg); } 
} 

.swing { 
    -webkit-transform-origin: top center; 
    -moz-transform-origin: top center; 
    -ms-transform-origin: top center; 
    -o-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation-name: swing; 
    -moz-animation-name: swing; 
    -ms-animation-name: swing; 
    -o-animation-name: swing; 
    animation-name: swing; 
}

來源

2012-06-29 Tallboy

如果你知道動畫需要多長時間，你可以這樣做：

$(function() { 
    $('.logo').hover(function(){ 
     $(this).addClass('animated swing'); 
     setTimeout(function() { 
      $(this).removeClass('animated swing'); 
     }, ...); 
    }); 
});

來源

2012-06-29 00:06:08

甚至當懸停時，讓css3動畫播放？

回答

相關問題