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;
}
您可能感兴趣的相关文章
本文链接：Magic CSS3 – 创建各种神奇的交互动画效果
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
作者：山边小溪
主站：yyyweb.com 记住啦：）
欢迎任何形式的转载，但请务必注明出处。
