开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约

xulongchang / animate.cssCSS

Watch 31 Star 100 Fork 18
加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
更方便更快速更易用的css animate 展开 收起

取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

初衷

基于css3的动画库非常多,但是总觉得没有合适自己的动画库,总会存在一些局限性。

设计思路

花几分钟阅读,能让你快速上手这个库的使用方法。
设计思路只有一条: 基于CSS3动画定义规则
首先看CSS3动画语法如下:

animation: name duration timing-function delay iteration-count direction;

对应的中文翻译:

animation: 动画名称 动画完成所花费的时间 动画曲线 动画延迟执行时间 动画播放次数 动画是否反向播放;     

设计思路就是动画必须的属性都单独内置class名称,给一个html标签配置“动画名称、动画时间、延迟时间、播放次数、是否反向播放”对应的class,就能创建出丰富的动画效果了,并且配置不一样的class名,就能搭配不一样的动画效果。

举例说明

1、 创建标签

<div><div>

2、 申明动画名称 ,比如“从上往下渐显”

<div class="showInTop"><div>

3、 申明动画执行的时间 ,比如“1秒”

<div class="showInTop a-time1"><div>

4、 申明播放次数 ,上面步骤是只执行一次的动画,正常情况下,要么是播放一次,要么是永久播放,如果需要永久播放,我们继续加播放次数的class即可,有如下两种方式

//永久播放
<div class="showInTop a-time1 a-yj"><div>
//永久+反向播放
<div class="showInTop a-time1 a-yjfx"><div>

5、 申明延迟播放

//比如延迟300毫秒后播放,加上a-delay003的class即可
<div class="showInTop a-time1 a-delay003"><div>

从我这边使用的场景来看,在申明动画名称和时间后,是否永久播放和延迟时间属于搭配用法,后面再给几个常见的搭配方案用法说明。

进阶用法

主要是搭配不一样的延迟时间来达到联动的效果。
以H5场景秀为例,一般一个页面会有多个动画元素,且有些动画是按照顺序播放的。
比如下面这张图(嫌弃麻烦的话,可以直接下载demo1查看效果,后续会持续加入其他demo)
输入图片说明

播放顺序是:1、第一行标题渐显;2、第二行说明文字渐显;3、底部说明文字从下往上渐显;4、中间建筑和文字渐显。
如果接到这个要求,你在没有使用动画库的情况下,你需要自己定义动画方法、时间等等,做完这些工作,需要多久时间?
如果你使用了其他的动画库,动画库都只提供了动画方式,动画时间是内置不可修改的,延迟也没有提供,你需要自己额外做延迟的工作,这些需要多久时间?
但我这个库就厉害了,对于CSS,你可以实现0编码,只需添加class名称,就能完成这个需求,在动画上的耗时几乎为0,实现步骤如下。
1、准备好基础布局

<div>第一行标题</div>
<div>第二行说明文字</div>
<div>中间建筑</div>
<div>底部说明文字</div>

2、定义动画名称和时间(时间都定为300毫秒)

<div class="fadeIn a-time003">第一行标题</div>
<div class="fadeIn a-time003">第二行说明文字</div>
<div class="fadeIn a-time003">中间建筑</div>
<div class="showInBottom a-time003">底部说明文字</div>

3、重点来了,加上动画时间和名称后,所有元素都是同步执行的,如果做到4个元素顺序执行,只需要考虑一下各时间的延迟就行,我们按照需要的延迟时间来加上延迟定义。

<div class="fadeIn a-time003">第一行标题</div>
<div class="fadeIn a-time003 a-delay003">第二行说明文字</div>//延迟300毫秒,这时候动画1已播放完成
<div class="fadeIn a-time003 a-delay007">中间建筑</div>//延迟700毫秒,这时候动画2已播放完成,动画3已播放500毫秒
<div class="showInBottom a-time003 a-delay005">底部说明文字</div>//延迟500毫秒,这时候动画2已播放500毫秒

这样一个顺序播放的整体动画就已经完成,是不是非常简单?

动画名称说明

内置的动画效果见animate.html文件,直接拷贝就可以使用,如果有需要其他的效果,请联系我来增加,联系方式可以留言或者QQ:413870769

动画时间

动画时间以0.3秒、0.5秒、0.7秒、0.9秒、1秒这样一个区间累加,对照表如下:
0.3秒 a-time003
0.5秒 a-time005
0.7秒 a-time007
0.9秒 a-time009
1秒 1秒 a-time1
1.3秒 a-time013
1.5秒 a-time015
1.7秒 a-time017
1.9秒 a-time019
2秒 1秒 a-time2
... 15.9秒 a-time159

动画延迟时间

规则与动画时间类似,对照表如下:
0.3秒 a-delay003
0.5秒 a-delay005
0.7秒 a-delay007
0.9秒 a-delay009
1秒 1秒 a-delay1
1.3秒 a-delay013
1.5秒 a-delay015
1.7秒 a-delay017
1.9秒 a-delay019
2秒 1秒 a-delay2
...
15.9秒 a-delay159

其他配置

需要动画永久播放,以及永久并反向播放时,直接搭配如下class即可:
永久播放+反向+匀速:a-yjfx 永久播放+匀速:a-yj

项目点评 ( 5 )

你可以在登录后,发表评论

搜索帮助

12_float_left_people 12_float_left_close