作者:Patrik Kiss 译者:前端小智 来源:dev
1.Animista
网站地址:http://animista.net/网站描述:在线生成 css 动画
Animista是一个在线动画生成器,同时也是一个动画库,它为我们提供了以下功能
1. 选择不同的动画
我们可以选择想要的动画类型(例如entrance/exist),除了可以选择某个动画(例如,scale-in)外,甚至还可以为该动画选择不同的展示效果(例如:scale-in-right)。
2. 定制
Animista还提供了一个功能,允许我们定制动画的某些部分,比如
- duration
- delay
- direction
更好的是,可以选择要设置动画的对象:
3. 生成CSS代码
选择适合自己需要的动画后,我们可以直接从网站上获取代码,甚者可以进行压缩:
4. 下载代码
另一个好用的功能是,可以把自己收藏自己喜欢的动画,然后一起下载下来, 或者,我们也可以选择将这些动画的代码复制到一起。
2. Animate CSS
网站地址:
http://daneden.github.io/animate.css
网站描述:齐全的CSS3动画库
想必这个不用介绍,大部分人都知道了。Animate CSS 可能是最著名的动画库之一。这里简要介绍一下它的用法:
1. 用法
首先,必须在总需要动画元素上添加类animated ,然后是动画的名字。
如果我们想让动画一直持续,可以添加infinite类。
通过 JS 来添加动画:
document.querySelector('.my-element').classList.add('animated',?'slideInLeft')
通过 JQ 来添加动画:
$(".my-element").addClass("animated?slideInLeft")
2. 其它功能
Animate CSS提供了一些基本的类来控制动画的延迟和速度。
** delay **
可以添加 delay 类来延迟动画的播放。
** speed **
我们还可以通过添加如下列出的类之一来控制动画速度。
类名速度时间
show2sslower3sfast800msfaster500ms
3. Vivify
网站地址:
http://vivify.mkcreative.cz/
网站描述: 一个更加丰富css动画库
Vivify 是一个动画库,可以看作是Animate CSS的增强版。它们的工作方式完全相同,有Animate CSS的大多数类且还扩展了一些。
使用 JS 方式:
document.querySelector('.my-element').classList.add('vivify',?'slideInLeft')
使用 JQ 方式:
$(".my-element").addClass("vivify?slideInLeft")
与Animate CSS一样,Vivify 还提供了一些类来控制动画的持续时间和延迟。
延迟和持续时间类在以下间隔中可用:
4. Magic Animations CSS3
网站地址:
https://www.minimamente.com/project/magic/
网站描述: Magic CSS3 Animations 是 CSS3 动画的包,伴有特殊的效果,用户可以自由的在 web 项目中使用。
这个动画库有一些非常漂亮和流畅的动画,特别是3D的。没什么好说的,自己去尝试。
使用 JS 方式:
document.querySelector('.my-element').classList.add('magictime',?'fadeIn')
使用 JQ 方式:
$(".my-element").addClass("magictime?fadeIn")
5. cssanimation.io
网站地址:
http://cssanimation.io/index.html
cssanimation.io是一大堆不同动画的集合,总共大概有200个,这很强大。如果你连在这里都没有找到你所需的动画,那么在其它也将很难找到。
它的工作原理与 Animista 类似。例如,可以选择一个动画并直接从站点获取代码,或者也可以下载整个库。
用法
将cssanimation {animation_name}添加到指定的元素上。
使用 JS
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')
使用 JQ
$(".my-element").addClass("cssanimation?fadeIn")
还可以添加 infinite 类,这样动画就可以循环播放。
此外,cssanimation.io还为我们提供了动漫字母的功能。使用这个需要引入letteranimation.js文件,然后将le {animation_name}添加到我们的文本元素中。
要使字母按顺序产生动画,添加sequence类,要使它们随机产生动画,添加random类。
Sequence
Random
6.Angrytools
网站地址:
https://angrytools.com/css/animation/
如果使用不同的生成器,Angrytools实际上是一个集合,其中还包括CSS动画生成器。
它可能不像Animista那么复杂,但我觉得这个也很不错。这个站点还提供了一些自定义动画的特性,比如动画的持续时间或延迟。
但是我喜欢的是,我们可以在其展示时间轴上添加自定义的keyframes,然后可以直接在其中编写代码。另外,也可以编辑现有的。
当我们完成的时候,可以得到完整的动画代码,也可以下载它。
7.Hover.css
网站地址:
http://ianlunn.github.io/Hover/网站描述: 纯CSS3鼠标滑过效果动画库
Hover.css是许多CSS动画的集合,与上面的动画不同,每次将元素悬停时都会触发。
一组CSS3支持的悬停效果,可应用于链接、按钮、徽标、SVG和特色图像等。
** 用法
它非常简单:只需将类的名称添加到元素中,比如
8.WickedCSS
网站地址:
http://kristofferandreasen.github.io/wickedCSS/#
WickedCSS是一个小的CSS动画库,它没有太多的动画变体,但至少有很大的变化。其中大多数是我们已经熟悉的基础知识,但它们确实很干净。
它的用法很简单,只需将动画的名称添加到元素中即可。
** 使用 JS
document.querySelector('.my-element').classList.add('bounceIn')
** 使用 JQ
$(".my-element").addClass("bounceIn")
9.Three Dots
网站地址:
http://kristofferandreasen.github.io/wickedCSS/#
Three Dots是一组CSS加载动画,它由三个点组成,而这些点仅由单个元素组成。
** 用法
只需创建一个div元素,并添加动画的名称
10.CSShake
网站地址:
http://kristofferandreasen.github.io/wickedCSS/#
顾名思义,CSShake是一个CSS动画库,其中包含不同类型的震动动画。
** 用法
将shake {animation name}添加到元素中。
** 使用 JS **
document.querySelector('.my-element').classList.add('shake','shake-hard')
** 使用 JQ **
$(".my-element").addClass("shake?shake-hard")
原文:
https://dev.to/weeb/10-of-the-best-css-animation-libraries-31d7
相关推荐
- 如何用5分钟开发一个 Webpack Loader?
-
嗨,我是勾勾。今天分享的内容是如何开发一个简单的WebpackLoader,希望通过这个过程能够让你Get到WebpackLoader的工作原理与机制。Loader作为Webpack...
- 前端——CORS跨域请求的限制与解决
-
node中设置允许跨域如果需要设置多个域允许跨域,可以根据req请求的地址进行写入不同的header;consthttp=require('http')http.cre...
- 5分钟看懂的WebAssembly入门指南(webassembly开发)
-
子肃阿里开发者2023-06-2009:01发表于浙江阿里妹导读本文是一篇WebAssembly的入门文章,从理论介绍到实战方面有全面的讲述。历史进程由于javascript的动态类型特性...
- 刚刚发布!Claude 4连续工作7小时,比Cursor、Copilot还猛?
-
你见过不吃不喝、连续工作7小时的“程序员”吗?Anthropic最新发布的Claude4,不只是AI,更像是你团队里的CTO。一、什么是Claude4?别急,这不是你熟悉的GPT“亲戚”202...
- JS对象判空的几种方式,你真的会了吗?
-
前言:为什么空对象检测如此重要?在开发中我们经常会遇到这样的场景:if(isEmpty(userInfo)){//跳转登录页}四种主流检测方案对比方案一:Object.keys()基础版fun...
- 密码被破译,行踪被美军全程掌握,日本海军军神命丧太平洋
-
【军武次位面】FriedrichLau一.突袭1941年12月7日,伴随着日军偷袭美军位于珍珠港的基地,美国也终于卷入了这场绵延全球的战火之中。为了报复日军这一行动,美军随后打出了一套组合拳,除了在太...
- 提示词技术详解(2)——零样本提示词
-
一、零样本提示(Zero-Shot)是一种会起到作用的办法。首先让模型重写提示词,然后把重写后的提示词再发给模型,以期提升回答效果。论文给出的提示词如下,仅供参考。给定一位用户的以下文字,提取其中不带...
- 这些流行饮料的中文名称,你会说吗?
-
[Photo/Pexels]Summerisinfullswing,andtheweatherishot!Tohelpyoucooldown,coldandrefre...
- 密码被破译多可怕?被美军全程盯梢,日本海军军神命丧太平洋
-
【军武次位面】FriedrichLau一.突袭1941年12月7日,伴随着日军偷袭美军位于珍珠港的基地,美国也终于卷入了这场绵延全球的战火之中。为了报复日军这一行动,美军随后打出了一套组合拳,除了在太...
- 一课译词:刀子嘴(刀子嘴是什么)
-
你身边一定有一些人,他们的言语总是那么尖锐、刺耳,但内心却又格外善良柔软,了解他们的人都知道,他们其实只是“刀子嘴,豆腐心”。“刀子嘴”,形容人说话十分刻薄(speaksarcasticallya...
- 捷克插画家柯薇塔·巴可维斯卡逝世,曾为《灰姑娘》绘制插图
-
柯瑞塔·巴可维斯卡。(图源:捷克共和国文化部)据捷克多家媒体消息,当地时间2月6日,捷克插画家柯薇塔·巴可维斯卡逝世,享年94岁。该消息经由她的儿子斯特潘·格里格(StěpánGrygar)证实。柯...
- 网络“匿名提问箱”成年轻人社交新宠 为何这么火?
-
网络“匿名提问箱”成为年轻人社交新宠“来自陌生人的关心”为什么这么火?“年度歌单里排名第一的是哪首歌?”“未来十年你的人生规划?”“有没有被甩过?”最近,这种别人能够匿名向自己提问的“提问箱”越来越得...
- 美国要开始搞6G了?专家:关键技术仍在摸索
-
2月21日,美国总统特朗普发推特“我希望5G乃至6G早日在美国落地”。日前,美国联邦通信委员会朝着特朗普的指示迈出了第一步,决定开放95千兆赫到3太赫兹频段,供6G实验使用。纽约大学教授泰德·拉帕波特...
- 常见的连续型随机变量(1)(连续型随机变量的定义与性质)
-
1.均匀分布在概率论和统计学中,均匀分布也叫矩形分布,它是对称概率分布,在相同长度间隔的分布概率是等可能的。均匀分布由两个参数a和b定义,它们是数轴上的最小值和最大值,通常缩写为U(a,b)。统计...
- 身高表上的-2SD、-1SD、中位数.....都是啥?和百分位有关系吗?
-
上周日晚,小编正气呼呼地和娃上演“作业拉锯战”时,“叮”的一声,一条微信发了过来。无独有偶,第二天又有朋友发来门诊记录,不知道SD什么意思。从家长应用的角度来看,无需太纠结,根据个人习惯选择即可。从生...
- 一周热门
-
- 最近发表
-
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)