你需要知道的 15 个很棒的 CSS 动画库
从一种 CSS 样式配置到另一种的过渡可以使用 CSS 动画进行动画处理。描述 CSS 动画的样式和指示动画样式的开始和结束状态的一组关键帧,以及可能的中间路点,构成了动画。
与传统的脚本驱动动画技术相比,CSS 动画提供了三大优势:
它们很容易用于简单的动画;你甚至不需要知道 JavaScript 来制作它们。
即使系统负载适中,动画也能正常工作。在 JavaScript 中,简单的动画通常运行不佳。为了使性能尽可能流畅,渲染引擎可以使用跳帧和其他方法。
例如,允许浏览器调节动画序列允许浏览器通过限制当前不可见的选项卡中动画的更新频率来提高性能和效率。
虽然大多数动画都可以使用纯 CSS 完成,但你可以使用动画库和框架在更短的时间内创建更好的动画。
Animate.css
官网地址;https://animate.style/
Anime.js
官网地址:https://animejs.com/
Anime.js (/ˈæn.ə.meɪ/) 是一个轻量级的 JavaScript 动画库,具有简单但功能强大的 API。它适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象
CSShake
官网地址:http://elrumordelaluz.github.io/csshake/
CSShake ——一个专门为在你的网页中摇动元素而设计的 CSS 库
Hover.css
官网地址:http://ianlunn.github.io/Hover/
Hover.css 是一个 CSS 动画库,旨在与你的网站中的按钮和其他 UI 元素一起使用
AniJS
官网地址:http://anijs.github.io/
AniJS 是一个动画库,允许您以简单的“类似句子”的结构向元素添加动画
Animista
官方地址:https://animista.net/
按需 CSS 动画
Tachyons-animate
官方地址: https://github.com/anater/tachyons-animate
Tachyons 本身是一个具有大量实用程序类的原子 CSS 库,用于通过向你需要的内容添加类来设计任何东西
Sequence.js
官方地址:https://www.sequencejs.com/
Sequence.js 是一个 JavaScript 库,它提供了一个响应式 CSS 框架,用于创建独特的滑块、演示文稿、横幅和其他基于步骤的应用程序
Infinite
官方地址:https://tilomitra.github.io/infinite/
这些动画,如旋转和脉冲,专门设计用于永远运行和重复
OBNOXIOUS.CSS
官方地址:https://tholman.com/obnoxious/
MOTION UI
官方地址:https://zurb.com/playground/motion-ui
用于创建灵活的 CSS 过渡和动画的 Sass 库
Keyframes.app
官方地址:https://keyframes.app/
用于生成自定义 CSS 关键帧动画的图形用户界面
AnimXYZ
官方地址:https://animxyz.com/
AnimXYZ 可帮助你为你的网站创建、自定义和组合动画。专为 Vue、React、SCSS 和 CSS 构建
Whirl
官方地址:https://github.com/jh3y/whirl
轻松加载 CSS 动画!
Hamburgers
官方地址:https://jonsuh.com/hamburgers/
Hamburgers 是一组CSS 动画汉堡包图标。还包括作为 Sass 库的源。它是模块化和可定制的,所以你可以自己做汉堡包。
你需要知道的 15 个很棒的 CSS 动画库相关推荐
- 你应该知道的 7 个很棒的 Java 项目
Java生态系统拥有庞大而多样化的开源项目,旨在满足几乎所有想象得到的需求.很容易错过其中一些伟大的项目.以下是七个开源Java项目,涵盖从全栈应用程序开发到微服务.Wasm和JVM替代方案的所有内容 ...
- 网络服务器最基本的是文件,你可能想知道的15个网络常用基础知识
原标题:你可能想知道的15个网络常用基础知识 网络是一个复杂的系统,涉及知识很多.现在腾正小超人给大家分享15个常用的网络基础知识: 1) 如何查看本机所开端口 用netstat -a -n命令查看! ...
- Web开发人员应当知道的15个开源项目
如今,构建网站和开发Web应用程序已经不仅要求开发人员是一名优秀的程序员,更需要聪明的程序员.这也就是说,在可能的情况下,重复使用已有的代码和应用程序,而不是自己重头开始. 开源由来已久,并且很多网站 ...
- 开发者都应该知道的15个API
从AI到AR到运输和电话,这些Web API为开发人员提供了各种有趣的可能性. 艾萨克·牛顿说他站在巨人的肩膀上看得更远,对于编写代码的人来说,API就是精华.它们让程序员站在巨人的肩膀上看得更远. ...
- 在线八字排盘软件 源代码_所有设计师都应该知道的15种在线排版工具
排版是任何设计的基础 ,因为阅读是我们在网络上所做的最基本的事情之一. 您选择的字体会影响网站的多个方面,包括可读性,心情和整体用户体验 . 对于设计师和开发人员来说, 了解排版的基本原理以创建易于阅 ...
- 你应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与知 ...
- 经验丰富程序员才知道的15种高级Python小技巧
本文将介绍15个简洁的Python技巧,向着简洁更高效,学习易懂出发. 目录 1.通过多个键值将对象进行排序 2.数据类别 3.列表推导 4.检查对象的内存使用情况 5.查找最频繁出现的值 6.属性包 ...
- 你应该知道的15个Silverlight诀窍
这篇文章列出了我使用Silverlight进行开发后,发现的15条小诀窍.如果你是一个全职的Silverlight开发的话,我希望你能了解并掌握它们. 我不会谈论MVVM,Prism或者MEF这些复杂 ...
- 关于Dalvik虚拟机你需要知道的15个问题
Dalvik是Android系统中另一个重要的部分,包括虚拟机和一组重要的运行环境.它的设计非常巧妙,是个很好的一个手机终端的底层应用.本文就简单介绍Dalvik相关的15个问题. 1.大部分jvm是 ...
最新文章
- 不要以为用了云,就不要运维
- python开发网络小工具_Python集成网络诊断小工具(含有ping,tracert,tcping等小工具)...
- 数学大师丘成桐:中国的科技至少要倒退20年
- 已知p是一个指向类a的数据成员m的指针_第三十八章、结构体指针、单向链表简介...
- codeforces1271 D. Portals(dp or 带悔贪心)
- 在Tiny6410烧写linux内核文件和文件系统
- 同态滤波(光照不均)
- VSCode摸鱼插件,让工作更轻松
- Java8遍历Map、Map转List、List转Map
- 微信小程序码生成时报data format error
- 上交所、深交所、中登结算的接口文档及下载链接
- 黑鲨重装计算机安装无法继续,黑鲨装机,小编教你黑鲨怎么安装win7
- 怎么录制电脑桌面视频 具体的操作方法
- Win10如何删除输入法(删除默认输入法)
- 支付宝小程序对接流程和工具类
- O2O之下,腾讯觊夺移动支付大数据,手Q支付出战支付宝
- ECCV2020超分辨率方向论文整理笔记
- xilinx apu ,rpu特点 及通信
- Android高德地图基本开发/在线高德离线地图开发/断网使用离线地图(Assets文件夹的使用)
- vb.net 获取系统图标_「快捷指令」桌面图标任意摆放