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;
}
![[CSS3] 使用 font-face 讓頁面可以顯示使用者電腦沒有安裝的字型](/assets/upload/1580227388021_0.jpg)
