你需要知道的 15 个很棒的 CSS 动画库

boyanx9个月前技术教程25

从一种 CSS 样式配置到另一种的过渡可以使用 CSS 动画进行动画处理。描述 CSS 动画的样式和指示动画样式的开始和结束状态的一组关键帧,以及可能的中间路点,构成了动画。

与传统的脚本驱动动画技术相比,CSS 动画提供了三大优势:

它们很容易用于简单的动画;你甚至不需要知道 JavaScript 来制作它们。

即使系统负载适中,动画也能正常工作。在 JavaScript 中,简单的动画通常运行不佳。为了使性能尽可能流畅,渲染引擎可以使用跳帧和其他方法。

例如,允许浏览器调节动画序列允许浏览器通过限制当前不可见的选项卡中动画的更新频率来提高性能和效率。

虽然大多数动画都可以使用纯 CSS 完成,但你可以使用动画库和框架在更短的时间内创建更好的动画。

Animate.css

官网地址;https://animate.style/

Anime.js

官网地址:https://animejs.com/

Anime.js (/'aen..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 库的源。它是模块化和可定制的,所以你可以自己做汉堡包。

相关文章

Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5

前言想必你一定使用过易企秀或百度H5等微场景生成工具制作过炫酷的h5页面,除了感叹其神奇之处有没有想过其实现方式呢?本文从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤,并开源前后端代码。有需...

能解决 80% 需求的 10个 CSS动画库

作者:Patrik Kiss 译者:前端小智 来源:dev 1.Animista网站地址:http://animista.net/网站描述:在线生成 css 动画Animista是一个在线动画生成器,...

这款基于SpringBoot 的CMS系统,开发企业官网确实香(附源码)

前言推荐这个项目是因为使用手册部署手册非常完善,项目也有开发教程视频对小白非常贴心,接私活可以直接拿去二开非常舒服开源说明系统100%开源模块化开发模式,铭飞所开发的模块都发布到了maven中央库。可...

总结100+前端优质库,让你成为前端百事通

1年多时间, 陆陆续续整理了一些常用且实用的开源项目, 方便大家更高效地学习和工作.js相关库js 常用工具类「lodash」 一个一致性、模块化、高性能的 JavaScript 实用工具库。「xij...

Adobe Animate (An) 2020网页设计软件下载和安装教程

Animate CC 于 2016年1月推出。同时,Adobe 还将推出适用于桌面浏览器的 HTML 5 播放器插件,作为其现有移动端 HTML 5 视频播放器的延续。此外,根据 Adobe 官方原...

CSS3 动画库——animation

CSS3 动画库——animation

动画库-animation.css简介animate.css 是一个来自国外的 CSS3 动画库, 它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rot...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。