首页 / 程序员圈 / 正文
Github上流行的CSS3动画效果库,你有没有尝试过——animate.css
中原一点粽匾 发表于:2020-3-17 08:34:51 复制链接 看图 发表新帖
阅读数:7008

下载APP可以快速和圈友联系

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
先容

animate.css是一堆很酷,风趣且跨阅读器的动画,供你在项目中利用。很是合适夸大,主页,滑块和一般的加水结果。

Github上风行的CSS3动画结果库,你有没有尝试过——animate.css-1.jpg


animate.css v4正在停止很多改良和严重变动,包括CSS自界说属性支持(又称CSS变量)和类前缀,以确保平安利用。感爱好的小伙伴可以上github关注停顿以及供给反应!

Github

animate.css的受接待水平毋庸置疑,在Github上star数高达接近63k,这是一个很是可观的数据,我相信实在大大都人或多或少都用过它

https://daneden.github.io/animate.css/

Github上风行的CSS3动画结果库,你有没有尝试过——animate.css-2.jpg


安装利用

    利用npm安装
$ npm install animate.css --save

大概 yarn:
$ yarn add animate.css

要在你网站中利用animate.css,只需将款式表放入文档的中,然后将动画类(animated)与任何动画称号一路增加到元素中,那末一个简单的动画结果就实现了,一下就是一个最简单的例子:



Example


以下是你可以利用的所用动画结果class

Github上风行的CSS3动画结果库,你有没有尝试过——animate.css-3.jpg


可以更修改画的延续时候,增加提早或更修改画播放的次数:
.yourElement {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}

Github上风行的CSS3动画结果库,你有没有尝试过——animate.css-4.jpg

    JavaScript的用法:

将animate.css与Javascript连系利用时,可以利用animate.css停止大量其他工作。一个简单的例子:
const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')

还可以检测动画何时竣事:
const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
element.addEventListener('animationend', function() { doSomething() })

可以利用以下简单功用来增加和删除动画:
function animateCSS(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)
function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function') callback()
}
node.addEventListener('animationend', handleAnimationEnd)
}

并像这样利用它:
animateCSS('.my-element', 'bounce')

// or
animateCSS('.my-element', 'bounce', function() {
// Do something after animation
})

留意,这些示例利用的是ES6的const声明,不再支持IE10和某些陈腐的阅读器。

Github上风行的CSS3动画结果库,你有没有尝试过——animate.css-5.jpg

    设定提早和速度:

可以间接在元素的class属性上增加提早,以下所示:
Example


Github上风行的CSS3动画结果库,你有没有尝试过——animate.css-6.jpg

    快慢class

经过增加这些类,可以控制动画的速度,以下所示:
Example


Github上风行的CSS3动画结果库,你有没有尝试过——animate.css-7.jpg

    自界说构建

Animate.css由gulp.js供给支持,这意味着你可以轻松建立自界说版本。

总结

有些时辰你看到他人的网站,感受速度也不是很快,可是很自然,那末很有能够是利用了动画,利用动画不会加速网站的拜候速度,可是可以让网页阅读器来加倍的平滑、加倍的自然,利用起来会感受很舒适,不会给人卡顿的感受!


上一篇:零根本必看!HTML5一站式扫盲
下一篇:五分钟搞懂 Linux 重点常识,傻瓜都能学会
温馨提示:
下载好向圈客户端可以随时随地交流学习经验,也可以和圈友发起聊天成为好友
好向圈www.kuaixunai.com是一个专业经验分享交流平台,请提供优质的经验内容分享,拒绝任何广告内容出现,低质量广告内容硬广包含手机号码,微信,QQ或者二维码,网址等形式存在可能会审核不通过甚至封号 圈友联系仅限于好向圈APP进行及时沟通咨询 要想被各大搜索引擎尽快收录请做好内容原创工作,才会有更好的推广效果。
返回列表
使用道具 举报
#github, #流行, #动画, #效果, #有没有
20 条评论
您需要登录后才可以回帖 登录 | 立即注册
亚铁保 发表于 2020-3-17 08:34:57 | 阅读全部
想学node但是看了一会官方文档感觉很懵,还有github的node项目基本找不到,不知从何入手,小编能说下么
使用道具 举报
回复
puzzle楊潔 发表于 2020-3-17 08:35:11 | 阅读全部
麻烦问一下,第一个节点是head吗?
使用道具 举报
回复
123465592 发表于 2020-3-17 08:35:29 | 阅读全部
我在想 能不能在vue中用
使用道具 举报
回复
一个人发神经经p 发表于 2020-3-17 08:35:51 | 阅读全部
都不是同一个领域,怎么取代啊,5cssjs这是三位一体的前端,后段才是群雄逐鹿的领域
使用道具 举报
回复
123465573 发表于 2020-3-17 08:36:14 | 阅读全部
另一个和animate.css配合使用的js插件叫什么来着?
使用道具 举报
回复
付东 发表于 2020-3-17 08:36:19 | 阅读全部
animate.css
使用道具 举报
回复
阳光破阳g 发表于 2020-3-17 08:36:39 | 阅读全部
不懂是什么,先保存
使用道具 举报
回复
毛毛青青张 发表于 2020-3-17 08:36:47 | 阅读全部
收藏
使用道具 举报
回复
阳光破阳g 发表于 2020-3-17 08:37:30 | 阅读全部
早用过了anime. js
使用道具 举报
回复
忆伊依依l 发表于 2020-3-17 08:37:48 | 阅读全部
收藏了
使用道具 举报
回复
最爱八卦哈哈庇 发表于 2020-3-17 08:37:58 | 阅读全部
想学node但是看了一会官方文档感觉很懵,还有github的node项目基本找不到,不知从何入手,小编能说下么
使用道具 举报
回复
123465664 发表于 2020-3-17 08:38:39 | 阅读全部
看着挺好的
使用道具 举报
回复
nce9226616 发表于 2020-3-17 08:39:32 | 阅读全部
哈哈哈
使用道具 举报
回复
极品雪狼ur 发表于 2020-3-17 08:40:20 | 阅读全部
M
使用道具 举报
回复
专喷脑残蓝qd 发表于 2020-3-17 08:40:54 | 阅读全部
开源项目 UI
使用道具 举报
回复
中原一点粽匾 发表于 2020-3-17 08:41:23 | 阅读全部
的确很好用,用来很多年
使用道具 举报
回复
卖女孩的打火柴 发表于 2020-3-17 08:41:47 | 阅读全部
转发了
使用道具 举报
回复
123465631 发表于 2020-3-17 08:42:40 | 阅读全部
转发了
使用道具 举报
回复
123465631 发表于 2020-3-17 08:42:54 | 阅读全部
转发了
使用道具 举报
回复
DanielWang2017 发表于 2020-3-17 08:43:42 | 阅读全部
转发了
使用道具 举报
回复
广告合作以及侵权投诉客服QQ:1623331347 江苏好向圈信息科技有限公司 网站地图1 网站地图2