Magic 一个比较魔性的 CSS3 动画库

Question

Magic CSS3 Animations 动画是一款独特的CSS3动画特效包，你可以自由地使用在您的网页中。只需简单的在页面上引入 CSS 文件 magic.css 或者压缩版本 magic.min.css 就可以使用了。

安装

GitHub Package Registry - Package url

npm install @minimac/magic.css

NPM - Package url

npm i magic.css

YARN - Package url

yarn add magic.css

使用方法

首先引入magic.css文件（或压缩版本magic.min.css）

<link rel="stylesheet" href="yourpath/magic.css">

或者是

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

给指定的元素加上指定的动画样式名

<div class="magictime puffIn"></div>

其中 magictime 决定动画的持续时间，必须添加的样式名。

在 JavaScript 中使用

这是一个用于悬停效果的示例代码 JavaScript。首先，引入 CSS 文件并添加 magictime 类然后选择一个想要的动画类。

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

如果要在一定时间后加载动画，可以使用以下示例：

//set timer to 5 seconds, after that, load the magic animation
function myFunction() {
    const selector = document.querySelector('.yourdiv')
    selector.classList.add('magictime', 'puffIn')
}
setTimeout(myFunction, 5000);

如果希望在一定时间后加载动画，但使用无限循环，则可以使用以下示例：

//set timer to 3 seconds, after that, load the magic animation and repeat forever
function myFunction() {
    const selector = document.querySelector('.yourdiv')
    selector.classList.add('magictime', 'puffIn')
}
setInterval(myFunction, 3000);

在 jQuery 中使用

这是一个用于jQuery悬停效果的示例代码。首先，引入 CSS 文件并添加 magictime 类然后选择一个想要的动画类。

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

如果要在一定时间后加载动画，可以使用以下示例：

//set timer to 5 seconds, after that, load the magic animation
setTimeout(function(){
    $('.yourdiv').addClass('magictime puffIn');
}, 5000);

如果希望在一定时间后加载动画，但使用无限循环，则可以使用以下示例：

//set timer to 3 seconds, after that, load the magic animation and repeat forever
setInterval(function(){
    $('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );

HTML 和 CSS技巧

你可以的改变时间通过设置类来设置动画的 magictime 例如：

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

默认的CSS的时间安排是：

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

如果要分配特定动画的计时，您可以使用以下代码(使用2级):

.magictime.magic {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}

所有动画类

MAGIC EFFECTS	BLING	STATIC EFFECTS	STATIC EFFECTS OUT	PERSPECTIVE	ROTATE
magic	puffIn	openDownLeft	openDownLeftOut	perspectiveDown	rotateDown
twisterInDown	puffOut	openDownRight	openDownRightOut	perspectiveUp	rotateUp
twisterInUp	vanishIn	openUpLeft	openUpLeftOut	perspectiveLeft	rotateLeft
swap	vanishOut	openUpRight	openUpRightOut	perspectiveRight	rotateRight
		openDownLeftReturn		perspectiveDownReturn
		openDownRightReturn		perspectiveUpReturn
		openUpLeftReturn		perspectiveLeftReturn
		openUpRightReturn		perspectiveRightReturn

SLIDE	MATH	TIN	BOMB	BOING	ON THE SPACE
slideDown	swashOut	tinRightOut	bombRightOut	boingInUp	spaceOutUp
slideUp	swashIn	tinLeftOut	bombLeftOut	boingOutDown	spaceOutRight
slideLeft	foolishIn	tinUpOut			spaceOutDown
slideRight	holeOut	tinDownOut			spaceOutLeft
slideDownReturn		tinRightIn			spaceInUp
slideUpReturn		tinLeftIn			spaceInRight
slideLeftReturn		tinUpIn			spaceInDown
slideRightReturn		tinDownIn			spaceInLeft

自定义构建

如果您想自定义CSS文件，现在您将有机会。例如，如果您只想包含某些动画，则必须转到以下文件：

assets/scss/magic.scss

注释或取消对所需文件的注释，并从终端运行以下命令：

npm install

最后的命令是：

gulp

自动这会产生新的文件！

浏览器兼容

Browser	Chrome	Firefox	Safari	iOS Safari	Opera	Android	Android Chrome	IE	Opera Mini
Version	31+	31+	7+	7.1+	27+	4.1+	42+	10+	no

相关链接

• github 地址：https://github.com/miniMAC/magic
• 预览地址：https://www.minimamente.com/project/magic/