Magic CSS3 Animations 動畫是一個獨特的 CSS3 動畫特效包，你可以自由地使用您的 Web 項目中。只需簡單的在頁面上引入 CSS 樣式: magic.css 或者壓縮版本 magic.min.css 就可以使用了。 這個項目現在GitHub上，包含 bling, perspective, rotate, slide, tin, bomb 等眾多特效。
您可能感興趣的相關文章
使用方法：
首先引入樣式文件：
<link rel="stylesheet" href="yourpath/magic.css">
然后給你想要實現動畫效果的元素添加類 magictime 以及動畫類名，例如：
$('.yourdiv').hover(function () {
$(this).addClass('magictime puffIn');
});
如果你要一定時間后執行動畫，可以這樣寫：
setTimeout(function(){
$('.yourdiv').addClass('magictime puffIn');
}, 5000);
循環執行動畫也是可以的：
setInterval(function(){
$('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );
你還可以自定義動畫的執行時間，修改時間參數即可：
.magictime {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
如果是針對特定動畫效果的修改，則可以這樣：
.magictime.magic {
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
}
您可能感興趣的相關文章