animate.css – 齐全的CSS3动画库

最近更新自己的网站时在使用css3的动画功能,感觉有点吃力,每次都要编辑一大堆的代码以及命名,像我这么懒的人一般hold不住的,因此就找了下是否有人专门做成动画库,网上同类的动画库还不少,最后发现还是“animate.css”这个动画库比较简便,就分享出来给大家,下面简述下简介和用法。

简介
Animate.css是由Dan Eden的Daniel Eden使用CSS3的animation制作的动画效果的CSS集合。

它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。换句话说:Animate.css就是一大堆的很酷,很有趣,而且很炫又能跨浏览器的动画效果样式集锦,可以直接使用到项目中。

浏览器兼容:

当然是只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。

使用方法

1、引入文件

<link rel="stylesheet" href="animate.min.css">

2、HTML 及使用

<div class="animated bounce" id="busy"></div>

给元素加上 class 后,刷新页面,就能看到动画效果了。animated 类似于全局变量,它定义了动画的持续时间;bounce 是动画具体的动画效果的名称,你可以选择任意的效果。

如果动画是无限播放的,可以添加 class infinite。

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class,比如:

$(function(){
    $('#dowebok').addClass('animated bounce');
});

有些动画效果最后会让元素不可见,比如淡出、向左滑动等等,可能你又需要将 class 删除,比如:

$(function(){
    $('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});

animate.css 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如:

#yourElement {
  -vendor-animation-duration: 3s;//动画持续时间
  -vendor-animation-delay: 2s;//动画持续时间
  -vendor-animation-iteration-count: infinite;//动画持续时间,infinite为无限循环
}

注意:一定要在CSS恬当的的前缀(webkit, moz,o等)代替“vendor”

语法:

     animation: name duration timing-function delay iteration-count direction;
    animation-name:             规定需要绑定到选择器的 keyframe 名称。。    
    animation-duration:         规定完成动画所花费的时间,以秒或毫秒计。    
    animation-timing-function:    规定动画的速度曲线。    
    animation-delay:          规定在动画开始之前的延迟。    
    animation-iteration-count:     规定动画应该播放的次数。(值:n次,infinite无限循环)    
    animation-direction:       规定是否应该轮流反向播放动画。

官网各种动画的演示地址:animate.css

animate可以到官网下载,可是国内上国外网站经常会歇菜,其中原因你懂的,所以我就上传到百度网盘方便大家下载了,下载链接如下:
animate.css百度网盘下载, 密码:busy


-------------本文结束 感谢您的阅读-------------
0%