Bricks 精美动画组件 Fancy Animations——滚动入场与悬停动画点选即用

现象：想要动画又不想手写 CSS

你想让按钮 hover 时浮起来、标题滚动到视口时从上方落下来——这类特效手写 CSS keyframes 挺费劲。Fancy Animations 就是来解决这个的：它把一堆现成动画做成预设类（class），你选一个类名套上，效果就来了。

根因：Fancy Animations 把动画做成预设类

Fancy Animations 是 Bricks 的一款扩展插件，提供两大类动画：页面滚动动画（元素进入视口时触发）和鼠标悬停动画（hover 时触发）。它不让你调参数拼动画，而是直接给你一堆做好的 CSS 类名，复制粘贴到元素的 class 里就生效——本质是“预设动画库”。

步骤一：安装激活与基础设置

1. 购买后从账号下载插件安装包，到 WordPress 后台 插件 > 安装插件 > 上传 安装并启用。
2. 启用后进入插件的授权页面，填入授权码激活。
3. 激活后，Bricks 编辑器画布右上角会出现 Fancy Animations 图标。
4. 进插件设置页，先调三个基础默认项：
   • 动画持续时间：默认 1s，最大 3s，一般 1s 左右最自然。
   • 动画延迟：触发后多久出现，默认 0.5s，最大 1s，建议 0.5s。
   • 全局选项：针对滚动动画，默认关闭；开启后滚动效果在页面刷新后只触发一次，再滚回来不再播。
   • 颜色设置：对应悬停动画（如 Ring 效果）里用到的几种颜色，每个动画取其中一个。

步骤二：給按钮加鼠标悬停动画

1. 在 Bricks 画布选中要加效果的元素（比如一个 Get in Touch 按钮）。
2. 点右上角 Fancy Animations 图标 启用它——这代表“这个元素要走 Fancy Animations 动画”，不启用后面设了也不生效。
3. 选“鼠标悬停”类效果，去 Fancy Animations 的演示页挑一个你喜欢的（比如浮动效果），复制它的类名（其实就是个 CSS class）。
4. 把类名粘贴到该元素的 class 搜索框 里，找到并选中这个类，它会列在元素 class 列表下方。
5. 保存/更新页面，预览：鼠标放上去，按钮就会上浮并带投影。

步骤三：给元素加滚动入场动画

1. 选中要加滚动效果的元素（比如一个标题）。
2. 开启动画开关（同上，点 Fancy Animations 图标启用）。
3. 在该元素的 class 搜索框里选你要的滚动效果类名（同样去演示页复制对应类名即可）。
4. 选中后类名会出现在元素 class 列表下方；同时标题可能在画布里“消失”——这是滚动效果无法在画布预览导致的，把右上角动画开关关掉就能在画布里看到它。
5. 保存/发布页面，访问页面：滚动到该标题时，它会从上方落下来。

具体类名、设置项文案和画布开关位置随插件版本变动，按官方文档补全再上生产。

什么时候该用 Fancy Animations（适用场景）

适合懒得手写 CSS、又想要统一悬停/入场动画风格的人：给按钮加悬停微交互、给卡片加滚动淡入、给图标加弹跳都很顺手。两个坑要注意：一是动画别堆在首屏 LCP 元素上，否则拖慢最大内容绘制；二是同一元素别叠加太多动画类，看着乱。追求极致性能或复杂时间轴时，用 GSAP（见本站 GSAP 教程）更可控。

小结

Fancy Animations 的思路很省事：动画 = 预设类名，复制粘贴就套上，不用自己写 keyframes。记住两条线——hover 用悬停类、进视口用滚动类，都靠“启用图标 + 填 class”两步完成。画布里看不到滚动效果别慌，关掉动画开关就能预览。

想给你的 Bricks 站批量加上这种点选动画？联系 Ray Chan，顺手帮你把 Fancy Animations 配好、挑一套不浮夸的效果。

• 相关阅读：Bricks Setup Guide 延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

Fancy Animations 要付费吗？ 具体随版本变动，以官方文档为准；安装前在插件页确认授权方式。

悬停动画和滚动入场能同时用吗？ 能，它们是不同触发类型，分别加到元素即可，但别在同一元素堆太多。

动画会影响 SEO 吗？ 不会，纯前端 CSS 动画不影响内容抓取，只要别让关键文字依赖动画才出现就行。

和纯手写 CSS 比哪个好？ 想要快、风格统一选它；想要精确控制时间轴和触发条件，手写 CSS/GSAP 更灵活。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程