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

rainux. rainux.     2022-12-05     758

关键词:

从一种 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 库的源。它是模块化和可定制的,所以你可以自己做汉堡包。

20个很棒的android开源项目帮助你提升开发技能

版权声明:本文为博主原创文章,未经博主允许不得转载。目录(?)[+]转载请注明出处:http://blog.csdn.net/crazy1235/article/details/56087721对程序员来说,最好的学习也是阅读,多看别人优秀的代码,加以总结学... 查看详情

10个很棒的javascript库,提升web开发效率

JavaScript是最流行的编程语言之一。过去的20年中程序员们见证了它的爆发式增长。现在,JavaScript几乎可以执行任何操作,并且可以在包括物联网在内的多个平台和设备上运行。其流行的原因之一是大量框架和库的可用性。作为... 查看详情

20个很棒的android开源项目帮助你提升开发技能

版权声明:本文为博主原创文章,未经博主允许不得转载。目录(?)[+]转载请注明出处:http://blog.csdn.net/crazy1235/article/details/56087721对程序员来说,最好的学习也是阅读,多看别人优秀的代码,加以总结学... 查看详情

css3常用动画+动画库

animate.css是来自dropbox的工程师DanielEden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现。 查看演... 查看详情

很棒的 CSS 效果

...时间】:2011-06-1810:14:14【问题描述】:404Page或500Page有人知道如何做这种事情吗?用鼠标移动的动画?感谢您的更正,@Alin。只是一个教程的链接会很好。编辑:刚刚还了解到它是视差效果。这应该会有所帮助。【问题讨论】:gi... 查看详情

推荐15款很棒的文本编辑器

本文中提及的文本编辑器软件,并非全部开源,仅供参考。1. Notepad++:这是Windows记事本一个最好的替换产品,主要特点包括:a.自动完成b.语法高亮c.拖放特性d.搜索e.缩放2. PSPad:PSPad是一个Windows平台上免费的适合程序员使... 查看详情

20+个很棒的python脚本的集合(迷你项目)(代码片段)

💂个人网站:【海拥】【摸鱼小游戏】【神级源码资源网站】🤟风趣幽默的前端学习课程:👉28个案例趣学前端💅想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬免费且实用... 查看详情

css3动画库收集

 1.animate.css–齐全的CSS3动画库http://www.dowebok.com/98.html 2.Angular官方动画库http://augus.github.io/ngAnimate/git地址:https://github.com/Augus/ngAnimate  查看详情

动画库animate.css的用法

简介animate.css是一个来自国外的CSS3动画库,它预设了引起弹跳(bounce)、摇摆(swing)、颤抖(wobble)、抖动(shake)、闪烁(flash)、翻转(flip)、旋转(rotate)、淡入淡出(fade)、滑动(Sliding)、光速(lightspeed)、缩放变... 查看详情

第三方动画库使用方法

...ate.css2.封装了很多工作中常用的动画3.在使用第三方时候,需要加上animated类名首先https://daneden.github.io/animate.css/下载animate.csslink进head中第一种方法<divclass="myWorld">我的世界</div><style>.myWorldan 查看详情

8个很棒的vue开发技巧

1.路由参数解耦通常在组件中使用路由参数,大多数人会做以下事情。exportdefaultmethods:getParamsId()returnthis.$route.params.id在组件中使用$route会导致与其相应路由的高度耦合,通过将其限制为某些URL来限制组件的灵活性。正确... 查看详情

animate.css_css3动画库介绍

...性好使用方便。Animate.css是一个有趣的,跨浏览器的css3动画库。很值得我们在项目中引用。用法1、首先引入animatecss文件123<head>  <link rel="stylesheet" href="animate.min.css"></hea 查看详情

uni-app引入css动画库

引入Animate动画库Animate中文网地址:http://www.animate.net.cn/Animate下载地址:https://daneden.github.io/animate.css/下载Animate.css在app.vue中引入动画库使用动画库:animated+动画End! 查看详情

Flex / Actionscript 中的文本动画库? [关闭]

...文本动画效果库。我已经放弃尝试使用Flash本身,因为这需要很长时间,而且我不知道从众多Flash文本动画工具中选择哪一个。我希望能 查看详情

20+个很棒的python脚本的集合(迷你项目)(代码片段)

💂个人网站:【海拥】【摸鱼小游戏】【神级源码资源网站】🤟风趣幽默的前端学习课程:👉28个案例趣学前端💅想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬免费且实用... 查看详情

fontawesome(一套很棒的图标库)

...FontAwesome图标库增添至任何一个应用中,方法很简单,只需要在你的HTML头部增加下列代码即可:<linkrel="stylesheet"href="//cdn.bootcss.com 查看详情

css动画库

转载自:http://www.cnblogs.com/starof/p/4968769.html 本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4968769.html有问... 查看详情

自己整理的css3动画库,附下载链接

动画调用语法animation:bounceIn0.3sease0.2s1both;按顺序解释参数:动画名称如:bounceIn一周期所用时间如:0.3s速度曲线如:ease值描述linear动画从头到尾的速度是相同的。ease默认。动画以低速开始,然后加快,在结束前变慢。ease-in动画... 查看详情