文档章节

animate.css – 齐全的CSS3动画库

孟飞阳
 孟飞阳
发布于 2017/09/03 23:15
字数 421
阅读 144
收藏 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

共有 人打赏支持
孟飞阳
粉丝 208
博文 981
码字总数 546304
作品 5
朝阳
个人站长
私信 提问
5个能够有效帮助你快速创建超棒CSS3动画效果的类库

日期:2012-11-28 来源:GBin1.com 如果你开发前端特效的话,肯定会首选javascript类库,例如,jQuery,使用它能够帮助你快速的帮助你生成兼容性相对良好的动画特效。或者,如果你对于兼容性...

gbin1
2012/11/29
22
0
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

没有更多内容

加载失败,请刷新页面

加载更多

分布式之数据库和缓存双写一致性方案解析

为什么写这篇文章? 首先,缓存由于其高并发和高性能的特性,已经在项目中被广泛使用。在读取缓存方面,大家没啥疑问,都是按照下图的流程来进行业务操作。 ![] 但是在更新缓存方面,对于更新...

hensemlee
30分钟前
3
0
怎么学习大数据

最近有很多人在找,大数据是怎么学?需要学什么技术以及这些技术的学习顺序是什么?今天有时间我把个问题总结成文章分享给大家。 那大数据处理技术怎么学习呢?首先我们要学习Java语言和Lin...

董黎明
30分钟前
1
0
MySQL 常用数据存储引擎区别

mysql有多种存储引擎,目前常用的是 MyISAM 和 InnoDB 这两个引擎,除了这两个引擎以为还有许多其他引擎,有官方的,也有一些公司自己研发的。这篇文章主要简单概述一下常用常见的 MySQL 引擎...

吴伟祥
32分钟前
1
0
MySQL学习笔记之三排序和过滤

在数据库的使用中排序和过滤也是经常的操作 排序检索数据,关键字order ##1.按照某个列名排序 普通排序mysql> select * from user;+----+--------+-----+-----------------------+-----+|...

凌宇之蓝
36分钟前
1
0
编译GDAL2.3.0的C#接口

编译完GDAL和JAVA接口后,如果需要使用C#调用,就需要编译C#的接口。方法如下: 注意:使用的SWIG版本不能使用太高版本,否则,会报一堆的类型未找到的错误,我是无从下手。使用swig2.0.7(据...

会哭的鳄鱼
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部