动画集合

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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