Andy.scss 动画实战4 个 Mixins 让页面缩放、淡入、滑入动起来【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andy想让网页元素拥有流畅的缩放动画、淡入淡出动画和滑入动画却不想手写一堆keyframes和浏览器前缀Andy.scss这款开源的 Sass Mixins 库帮你把复杂的动画代码压缩成一行调用新手也能快速上手。本文带你认识其中最实用的 4 个动画 Mixins让页面活起来什么是 Andy.scss一个开箱即用的 Sass Mixins 库Andy.scss 是一个轻量级的开源 Sass Mixins 集合它的目标很纯粹把日常开发中反复使用的 CSS 技巧居中、渐变、字体、动画等封装成一个个可复用的 Mixins让你摆脱重复劳动也无需引入笨重的框架。整个库只有一个文件 andy.scss体积小巧、开箱即用。对于动画而言Andy.scss 内置了缩放、淡入淡出、滑入等常用动效 Mixins并且自动处理-webkit-、-ms-等浏览器前缀兼容老旧浏览器省心又省力。第一步引入 Andy.scss 的两种最快方式在开始动画实战前先把库引入项目。推荐两种方式方式一直接下载文件把 andy.scss 下载到你的 Sass 项目目录然后在主样式文件中引入即可import andy;方式二Git 克隆仓库如果你希望获取完整源码与文档可以克隆仓库git clone https://gitcode.com/gh_mirrors/an/andy引入完成后还可以通过修改 andy.scss 中的$base-font-size变量来适配项目的基准字号非常灵活。核心实战4 个动画 Mixins 逐个上手1. scale()一键实现缩放动画缩放动画是页面中最常见的动效之一常用于按钮悬停、卡片强调等场景。Andy.scss 的scale()Mixins 会自动生成完整的keyframes无需手动编写关键帧。只需一行调用.button { include scale(1.2, 2s ease infinite alternate); }上面的代码会让按钮在 1 倍和 1.2 倍之间来回缩放形成呼吸感的脉动效果。缩放幅度、时长、缓动函数都可以自由调整。该 Mixin 的源码位于 andy.scss它会自动为动画命名如scale-1-2并输出带前缀的动画声明。2. fade()丝滑的淡入淡出动画页面切换、弹窗出现、图片轮播……淡入淡出动画几乎无处不在。Andy.scss 的fade()Mixin 接收起始和结束两个透明度值帮你生成完整的淡入淡出关键帧.notice { include fade(0, 1, 1.5s ease); }上面这段代码让.notice从完全透明opacity: 0平滑过渡到完全不透明opacity: 1实现优雅的淡入效果。它同样会自动处理 IE 的filter兼容写法细节非常到位。源码见 andy.scss。3. slide-in-from()自由控制方向的滑入动画想让弹窗从上方滑入、侧边栏从右侧滑入slide-in-from()是滑入动画的主力 Mixin支持 X / Y 两个轴并可通过偏移量控制滑动距离.modal { include slide-in-from(y, -200px, 1.5s ease-out); } .sidebar { include slide-in-from(x, 300px, 1s ease-out); }第一个例子让弹窗从上方 200px 处滑入第二个让侧边栏从右侧滑入。滑入的同时还叠加了淡入效果动效更有质感。Mixin 会根据参数自动生成slide-in-y--200px这样的动画名源码位于 andy.scss。4. transition()交互反馈的润滑剂如果说前面三个是完整的动画那么transition()就是悬停、点击等交互的润滑剂。它把标准写法transition: all 0.3s ease-in-out;压缩成一行调用并自动补齐-webkit-前缀.card { include transition(0.3s, ease-in); :hover { transform: translateY(-4px); } }配合transform()等 Mixin见 andy.scss几行代码就能做出精致的悬浮上浮效果。源码见 andy.scss。进阶技巧把 4 个 Mixins 组合出高级动效单个 Mixin 已经很好用组合起来效果更惊艳比如做一个弹窗出现的完整动效.popup { include slide-in-from(y, -300px, 1s ease-out); // 先滑入 include fade(0, 1, 1.5s ease); // 同时淡入 }再比如按钮的脉动 悬浮双重反馈.btn { include transition(0.3s, ease); :hover { include scale(1.1, 0.6s ease); } }这样组合使用缩放动画、淡入淡出动画、滑入动画可以覆盖绝大多数页面动效需求且代码量极少、可读性极高。总结用 Andy.scss 让页面动效一步到位Andy.scss 的价值在于你不需要精通keyframes语法也不必纠结浏览器前缀只需记住 4 个动画 Mixins 的名字和参数就能快速实现缩放、淡入、滑入等常用动效。整个库源码清晰、注释完善官方文档位于 doc/index.html非常适合学习 Sass Mixins 的写法。如果你正在寻找一个轻量、易用、无依赖的 Sass 动画解决方案不妨现在就克隆 andy.scss 试一试让页面真正动起来吧【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考