同步操作将从 xulongchang/animate.css 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
基于css3的动画库非常多,也非常丰富,但是总感觉没有一个合适自己的动画库,所以几年前开始自己创建了一个动画库,之后一直是自己在使用,中间也推荐给了一些同事使用,效果个人感觉还可以。
了解设计思路,能方便你快速上手这个库的使用方法,花几分钟阅读即可。
设计思路基于CSS3动画的定义规则,首先看CSS3动画语法如下:
animation: name duration timing-function delay iteration-count direction;
对应一个完整的就是:
animation: 动画名称 动画完成所花费的时间 动画加速曲线 动画延迟执行时间 动画播放次数 动画是否反向播放;
那么我们的使用规则,给一个标签配置“动画名称、动画时间、延迟时间、播放次数、是否反向播放”对应的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场景秀为例,一般一个页面会有多个动画元素,且有些动画是按照顺序播放的。
比如下面这张图。
播放顺序是: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毫秒
这样一个顺序播放的整体动画就已经完成,是不是非常简单?
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。