文档章节

animate.css – 齐全的CSS3动画库

孟飞阳
 孟飞阳
发布于 2017/09/03 23:15
字数 421
阅读 113
收藏 0

演示地址:http://www.dowebok.com/demo/2014/98/

配合aniauto功能会更强大:https://justinzzc.github.io/aniAuto/

aniauto+animate演示:https://justinzzc.github.io/aniAuto/demo/demo.html

简介

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。

虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西。

兼容

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

使用方法

1、引入文件

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

2、HTML 及使用

<div class="animated bounce" id="dowebok"></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 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如:

#dowebok {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

注意添加浏览器前缀。

本文转载自:http://www.dowebok.com/98.html

共有 人打赏支持
孟飞阳
粉丝 205
博文 964
码字总数 543203
作品 5
朝阳
个人站长
animate.css简介

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种...

我输过但从未怕过
2015/12/11
49
0
Animate.css

Animate.css 是一个有趣的,跨浏览器的 css3 动画库,内置了很多典型的 css3 动画,兼容性好使用方便。

小编辑
2012/04/19
26.1K
0
基于 html5+css3 前端切图实现微场景秀--切图秀

什么是切图秀? 我们把切图秀定义为基于 html5+css3 前端切图实现的微场景秀。并且开源切图秀的基础项目,它提供了一个可靠的基础去创建你的项目,你只需要发挥你的创意去组合动画。 作品 切...

qietuwang
2017/06/25
418
0
css3动画简介以及动画库animate.css的使用

在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工。美你妹啊,请叫我前端工程师好不好。呃。。好吧,攻城尸。。。呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能...

lovethe51cto
2016/01/12
0
0
animate.css 一些常用的CSS3动画效果

大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流。animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下。 项目主页:h...

xiahuawuyu
2012/05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式锁的那点事

在多线程并发的情况下,要保证一个代码块在同一时间只能由一个线程访问,可以用锁来保证,比如java的synchronized语法以及ReentrantLock类等等。这样子可以保证JVM进程内的多个线程同步执行。...

无语年华
26分钟前
2
0
apahce启用http2

需要前置条件传送门 其实前置做完了,h2是很简单的事 1.apache启用http2_module 2.打开apche的配置文件,写上 Protocols h2 http/1.1 3.重启apache,打开浏览器看看吧...

gcudwork
41分钟前
1
0
redis-string

set key value 设置值 set命令有以下选项: ex senconds :为健设置秒级过期时间 px millisencondes :为健设置毫秒级过期时间 nx :健不存在时候,可以设置成功,用于添加 xx : 与nx相反,不...

拐美人
47分钟前
2
0
正弦 余弦 角度 用于画时钟

<html> <head> <title>时钟</title> </head> <style> #canvas{ background: #1977ca } </style>......

一箭落旄头
今天
4
0
驰狼课堂

http://www.chilangedu.com/

求是科技
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部