HomeStylesTemplates
StyleKit
风格库模板

StyleKit

精选网页设计风格库,帮助 AI 生成更好看的网站。

导航

风格库配色主题合集模板指南博客更新日志

资源

UI 设计提示词落地页提示词Dashboard 提示词Tailwind UI 提示词暗黑模式提示词GitHub 仓库

保持更新

订阅即表示您同意我们的 隐私政策 和 服务条款。


提意见

有想法、建议,或发现了问题?直接告诉我,意见会发到我邮箱。

提个建议

支持维护

如果 StyleKit 恰好帮到了你,欢迎扫码支持。金额随意,每一份心意我都很感谢。

扫码支持 / 查看全部方式

(c) 2026 StyleKit. 开源项目。

关于联系与支持隐私政策服务条款基于 Editorial 风格构建
StyleKit 前端样式库stylekit.top陕ICP备2025065501号-3

动画词汇表

动画设计语言

12 个分类、48 个核心术语,每个术语都配有一个 StyleKit 真实可运行的动效作为参照。从设计师、工程师到 AI 提示词,都能用同一套词汇精确描述运动。

入场与出场

6 个术语

元素如何出现、就位和离开屏幕。

淡入

元素从透明渐变到完全不透明,常配合轻微位移或缩放。适合需要平静感的场景。

淡入上滑→另见淡入下滑模糊到清晰
相关滑入 · 缩放进入 · 弹出

滑入

元素从屏幕外沿某条轴向(左、右、上、下)滑入并就位。

左侧滑入→另见右侧滑入右侧滑出
相关淡入 · 平移

缩放进入

元素从一个较小的尺寸放大到最终尺寸,围绕 transform-origin 锚点进行。

缩放淡入→另见缩放消失远景拉近
相关弹出 · transform-origin

弹出

元素出现时短暂越过目标尺寸再回弹就位,通过弹性传达强调。

弹性入场→另见弹性回弹弹簧缩放
相关缩放进入 · 弹跳 · 弹簧

显露

元素被移动的遮罩或 clip-path 逐渐显露,形成擦除效果。

文字揭示→另见滚动显现
相关剪切路径

淡出

元素从完全不透明渐变到透明,表示离开或关闭。

淡出下滑→
相关淡入

时序与编排

4 个术语

协调多个动画:何时开始、持续多久、按什么顺序。

关键帧

定义动画起点、终点和中间状态的路标点。CSS @keyframes 用百分比列出进度。

淡入上滑→另见脉搏跳动下划线绘制

错开

多个元素按小间隔依次动画,让眼睛按顺序阅读。

子元素错开动画→

延迟

动画开始前的等待时长。常与 stagger 配合串接入场。

子元素错开动画→另见淡入下滑
相关错开 · 时长

时长

动画从开始到结束的持续时间。短用于灵敏 UI,长用于电影感。

3
脉搏跳动→另见微光扫过
相关easing · 延迟

位移与变换

4 个术语

平移、缩放、旋转和倾斜:在屏幕上移动元素的空间原语。

平移

元素沿 X 或 Y 轴(或 Z 轴 3D)移动。最易走合成层的变换——通常 GPU 加速。

左侧滑入→另见右侧滑入视差浮动

缩放

元素整体或单轴缩放。常配合 transform-origin 从特定锚点缩放。

缩放淡入→另见缩放消失远景拉近弹簧缩放

旋转

元素在 2D 中围绕 transform-origin 旋转。完整 3D 旋转需要在父元素设置 perspective。

旋转入场→另见3D 卡片翻转

3D 倾斜

元素同时沿 X 和 Y 轴旋转,模拟物理卡片响应光标。父元素需设置 perspective。

3D 透视倾斜→另见3D 卡片翻转

过渡

4 个术语

状态如何变化:交叉淡入、形状变形、折叠式布局切换。

交叉淡入淡出

出场元素淡出同时入场元素淡入,共享同一位置。

交叉淡化→另见文字渐变流动

变形

一个形状平滑地变为另一个(如播放按钮展开为视频播放器)。通常需要 FLIP 或共享元素过渡。

形状变形→另见形态过渡

布局动画

由布局引擎(而非 transform)驱动的位置或尺寸变化动画。通常需要 FLIP 测量前后状态。

折叠收起→另见滑动切换

折叠面板

折叠展开过渡,高度(或宽度)在 0 和内容尺寸之间动画,保持布局连续性。

折叠收起→

滚动

4 个术语

由滚动位置驱动的动画:进入时显现、视差、翻页。

滚动显现

元素在滚动进入视口时淡入、滑入或变形,使用 IntersectionObserver 或 scroll-driven CSS。

滚动显现→另见文字揭示

滚动驱动

进度直接绑定到滚动位置而非时间的动画,随用户滚动前后 scrub。

滚动翻页→另见滚动剥离视差浮动

视差

层在滚动时以不同速度移动,营造深度感。背景比前景慢。

视差浮动→另见跑马灯滚动

跑马灯

内容在循环中持续滚动,通常是水平方向。常用于 logo 墙和合作伙伴展示。

ABCDABCD
跑马灯滚动→
相关循环 · 视差

反馈与交互

4 个术语

响应用户输入:悬停、按下、拖拽、抖动、波纹。

Hover 效果

光标进入元素时的视觉响应。抬起、发光、倾斜或变色,都是常见模式。

悬浮抬升→另见悬浮发光磁吸悬浮聚光灯卡片

按下反馈

鼠标按下或触摸开始时的视觉反馈,在用户松开前确认点击已注册。

Click
涟漪点击→

抖动

短暂引人注意的振荡,表示错误、校验失败或需要响应的通知。

Error
抖动提示→

波纹

圆形波纹从触点扩散,模拟手指接触水面等材质反馈。

Click
涟漪点击→
相关按下反馈

缓动

4 个术语

运动随时间的形状:ease-out 灵敏、ease-in 迟缓、cubic-bezier 精细调节。

缓出

起步快、收尾慢。入场的默认选择——因为用户立刻看到动作,响应感强。

淡入上滑→另见缩放淡入

缓入

起步慢、收尾快。出场的默认选择——因为视线跟随元素到达静止点,显得优雅。

淡出下滑→另见缩放消失

缓入缓出

两端慢、中间快。适合起点和终点都应显得稳定的过渡。

形态过渡→另见交叉淡化

三次贝塞尔

四点曲线一次性定义完整缓动形状(P0=0,0 P1=x1,y1 P2=x2,y2 P3=1,1)。最灵活的缓动原语。

弹性入场→另见弹性回弹
相关弹跳 · 弹簧

弹簧动画

4 个术语

基于物理的运动:刚度、阻尼、质量,及由此产生的过冲与稳定。

弹簧

基于物理的运动,模拟弹簧上的质量块。过冲目标、振荡、稳定——无需手动调缓动。

Snap
弹性回弹→另见弹簧缩放弹性入场
相关刚度 · 阻尼

刚度

弹簧向目标加速的快慢。刚度越高 = 越灵敏,越低 = 越迟缓。

Snap
弹性回弹→另见弹性入场
相关弹簧 · 阻尼

阻尼

振荡衰减的快慢。高阻尼 = 无过冲直接稳定,低阻尼 = 弹来弹去。

3
脉搏跳动→另见骨架屏脉冲弹簧缩放
相关弹簧 · 刚度

弹跳

越过目标后弹回,像球落地。实现为低阻尼 cubic-bezier 或 spring。

弹性入场→另见弹性回弹
相关弹簧

循环与环境动效

4 个术语

永不停止的连续运动:跑马灯、脉冲、闲置悬浮。

循环

动画到达终点后从头开始重播。加载器与环境动效的必备。

3
脉搏跳动→另见三点弹跳加载跑马灯滚动

脉冲

单次心跳般的缩放或透明度振荡,通常循环。用于“实时”指示和骨架屏。

3
脉搏跳动→另见脉冲光环骨架屏脉冲
相关循环

微光

渐变扫描划过占位图形,提示内容正在加载。

微光扫过→另见骨架屏脉冲
相关循环

悬浮

元素轻微上下或左右漂移,表示闲置的环境状态。

视差浮动→
相关循环

润色与特效

4 个术语

增添匠心的精修:模糊、剪切路径、线条绘制、打字机。

模糊

失焦的柔和感,常从完全模糊动画到清晰焦点,吸引视线聚焦。

模糊到清晰→

剪切路径

只显示元素在任意形状内的部分。动画化形状产生擦除或显现效果。

文字揭示→另见滚动显现

线条绘制

路径从零长度动画到完整长度,呈现自绘效果。用于签名式装饰或进度提示。

Home
Blog
下划线绘制→另见边框描边

打字机

文本逐字符出现,模拟打字机或终端输出。常配合闪烁光标。

Hello
打字机效果→另见文字解密

性能

3 个术语

保持 60fps 的动画:合成层、GPU 加速、will-change、减弱动效。

帧率

浏览器每秒能渲染的帧数。60fps = 每帧 16.6 毫秒。超过 60 在标准显示器上无意义。

3
脉搏跳动→另见滚动显现视差浮动

合成层

浏览器中由 GPU 处理 transform 和 opacity 而不触发布局或绘制的层。在 transform/opacity 上的动画是“合成的”,保持流畅。

悬浮抬升→另见缩放淡入视差浮动

GPU 加速

属性被提升到独立 GPU 层(通过 transform: translateZ(0) 或 will-change),浏览器无需重栅格化页面即可动画。

悬浮抬升→另见缩放淡入视差浮动3D 透视倾斜
相关合成层

原则

3 个术语

决定动效加分还是减分的设计原则。

有目的

每个动画都应传达信息——反馈、层级或空间关系。在重要元素上做纯装饰性运动会分散注意力。

悬浮抬升→另见涟漪点击

预备

主要动作前的反向小动作。按钮在放大前轻微缩小;球在弹跳前先压缩。让运动有重量感。

弹性入场→另见弹性回弹

感知性能

用户对应用速度的感受,而非实际毫秒数。骨架屏和乐观更新让一切感觉比实际更快。

骨架屏脉冲→另见微光扫过进度条加载