magic.css

1.1、magic.css简介

是什么 ?	`:`	`CSS3 Animations with special effects.`
开发语言	`:`	CSS
源码仓库	`:`	https://github.com/miniMAC/magic

1.2、通过开源CDN引入animate.css

jsDelivr⤵︎

<link href="https://cdn.jsdelivr.net/npm/magic.css@1.4.5/dist/magic.min.css" rel="stylesheet">

BootCDN⤵︎

<link href="https://cdn.bootcdn.net/ajax/libs/magic/1.1.0/magic.min.css" rel="stylesheet">

1.3、通过下载到本地引入magic.css

step1、通过包管理器安装magic.css

包管理器	安装命令
bower	`bower install magic.css --save`
npm	`npm install magic.css --save`
yarn	`yarn add magic.css`

step2、在HTML代码中引入CSS

<link href="/bower_components/magic.css/dist/magic.min.css" rel="stylesheet">

1.4、使用magic.css

在要展示动画的元素上，使用magictime类，再加上具体一种动画，示例：

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

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

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