动效与交互

元素从下方淡入并向上滑动，最常见的入场动画之一。

元素从缩小状态放大至原始尺寸并淡入，适合卡片、弹窗等组件入场。

元素从上方淡入并向下滑动，常用于导航栏、下拉菜单入场。

元素从左侧滑入视口，适合侧边栏、抽屉菜单等组件。

元素以弹性缩放方式入场，从小尺寸弹跳过冲后稳定在原始大小，充满活力感。

元素从右侧滑入视口，适合侧面板、抽屉菜单和分屏布局的入场效果。

元素从反向旋转并透明的状态旋转至正位并淡入，适合图标和趣味性入场。

元素从远处快速拉近至原始尺寸，带有强烈的纵深感和冲击力。

元素以弹簧物理效果入场，多次过冲和回弹后稳定，比 bounce-in 更夸张的弹性感。

鼠标悬停时元素向上移动并加深阴影，营造悬浮立体感。

鼠标悬停时元素边框发出柔和光晕，适合 CTA 按钮和交互卡片。

卡片沿 Y 轴进行 3D 翻转，显示背面内容，需要透视容器和 backface-visibility 控制。

边框像被画笔描绘一样逐渐显现，从一角开始沿四边绘制完成。

鼠标悬停时下划线从左到右绘制展开，离开时反向收回，经典的导航链接交互效果。

文字逐字显现并带有闪烁光标，模拟打字机输入效果。

文字颜色以渐变方式持续流动变化，吸引注意力的标题效果。

数字通过垂直滚动方式从 0 滚动至目标值，适合数据面板和统计展示。

文字或内容水平无限循环滚动，常用于公告栏、品牌展示和合作伙伴列表。

文字以数字故障风格闪烁和偏移，带有赛博朋克美学的视觉冲击力。

文字通过遮罩从下方逐行揭示显现，常用于英雄区标题和关键文案的戏剧性入场。

文字以随机字符快速滚动后逐字解密为最终内容，常见于黑客终端和科技品牌网站。

骨架屏加载占位符的脉冲闪烁效果，提示用户内容正在加载中。

三个圆点依次弹跳的加载指示器，轻量且易于实现。

光线从左到右扫过元素表面，Apple 风格的加载占位符效果。

进度条从左到右填充并带有光泽扫过效果，适合加载状态和进度指示场景。

元素进入视口时淡入显现，利用 IntersectionObserver 实现滚动触发。

元素随滚动以不同速率移动，产生深度视差效果，增强页面层次感。

滚动驱动的 3D 翻页效果，页面像书页一样沿 Y 轴翻转剥离，露出下一页内容。

滚动驱动的页面剥离效果，当前页面像贴纸一样从右上角卷起剥离，露出下一层内容。

背景渐变颜色持续缓慢流动变化，营造动态氛围感。

通过 border-radius 过渡实现有机的 blob 形状连续变形，适合装饰性背景元素。

子元素依次错开执行入场动画，通过延迟差营造流畅的序列感。

元素在水平方向快速抖动，常用于表单校验失败或错误提示的视觉反馈。

元素以心跳般的节奏缩放跳动，常用于提示用户注意或表示活跃状态。

元素被拉伸后像橡皮筋一样弹性回弹到原位，充满物理质感的趣味交互。

从元素中心向外扩散的脉冲圆环效果，适合状态指示器、在线标志和注意力引导。

点击时从触发点向四周射出彩色纸片粒子，适合成功状态、庆祝和游戏化场景的视觉反馈。

元素从模糊状态逐渐变清晰并淡入，营造柔和的过渡入场效果。

两个元素交叉切换：一个淡出的同时另一个淡入，实现平滑的内容过渡。

新旧内容以水平滑动方式交替切换，旧内容滑出左侧的同时新内容从右侧滑入。

元素在两种形态之间平滑过渡，包括尺寸、圆角、颜色等属性的同步变化。

鼠标在卡片上方移动时，呈现手电筒照亮卡片局部的光影跟随效果。

鼠标靠近目标元素时，元素会像被磁铁吸引一样向鼠标指针方向产生弹性位移。

点击时从触发点产生向外扩散的圆形涟漪效果，Material Design 风格的经典交互反馈。

在鼠标附近显示克制的柔和光晕，增强空间感但不替换系统光标。

多个小点延迟追随鼠标，形成短暂轨迹，适合演示页和创意页面。

鼠标靠近时才显示辅助操作或信息，让密集界面保持安静。

文字字符在鼠标靠近时轻微避让，适合标题和品牌字标的演示效果。

鼠标经过图像时产生局部液态位移，适合高表现力作品集和专题页。

多层元素按不同强度响应鼠标位置，形成轻量空间深度。

拖拽对象带有惯性、吸附或回弹，提升画布类工具的手感。

根据不同区域显示简短状态提示，例如拖拽、查看、复制或禁用。

鼠标在卡片上移动时，卡片随鼠标位置产生 3D 透视倾斜效果，营造沉浸式的空间深度感。

元素向下滑动并逐渐消失，最常见的退场动画之一。

元素缩小并淡出，适合弹窗关闭、气泡消失等退场场景。

元素向右侧滑出视口并消失，适合侧面板关闭、抽屉菜单收起等退场效果。

元素高度从完整状态收缩至零并淡出，适合手风琴、FAQ 折叠面板等场景。