从一种 CSS 款式配备到另一种的衔接可以用 CSS 动画开展动画解决。叙述 CSS 动画的式样和标示动画款式的开始与结束情况的一组关键帧,还有也许的正中间路点,构成了动画。
与传统的的脚本制作推动动画技术性对比,CSS 动画带来了三大优势:
他们非常容易用于简单动画;你乃至不用了解 JavaScript 来制做他们。
即便系统软件负荷适度,动画也可以正常工作。在 JavaScript 中,简单动画一般运作欠佳。为了能使特性尽量顺畅,3D渲染模块可以用卡帧和其它方式。
比如,容许电脑浏览器调整动画编码序列容许电脑浏览器根据限定现阶段不可见的选项中动画的更新频率来提高性能和高效率。
尽管大部分动画都可以用纯 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 库的源。这是模块化设计和可定制的,所以你可以自己做汉堡包。
原创文章,作者:小怪兽,如若转载,请注明出处:https://fxtime.xyz/%e6%8e%a8%e8%8d%9015-%e4%b8%aa%e5%a4%a7%e5%b8%88%e4%b8%93%e7%94%a8%e7%9a%84css-%e5%8a%a8%e7%94%bb%e5%ba%93/