Magic Animations 是一個有許多 CSS3 動畫的 library，簡單的套用他的 CSS 就能完成許多現成的效果了。

Demo：Magic Animations

github：https://github.com/miniMAC/magic

 

安裝：

npm i magic.css
yarn add magic.css

 

或從 github 下載 css 回去都可以。

使用 js 執行，puffIn 那段可以換成你想要執行的效果，可以使用的效果列表在 github 頁面上有：

const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')

 

使用 jQuery：

$('.yourdiv').hover(function () {
    $(this).addClass('magictime puffIn');
});

 

定時執行動畫：

setTimeout(function(){
    $('.yourdiv').addClass('magictime puffIn');
}, 5000);

動畫不斷執行：

setInterval(function(){
    $('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );

 

修改動畫執行時間需要調整 css

.magictime {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}