Animation Patterns
Ready-to-copy CSS animation patterns. Each includes CSS keyframes and Tailwind utility class code.
49 animations
淡入上滑
元素从下方淡入并向上滑动,最常见的入场动画之一。
缩放淡入
元素从缩小状态放大至原始尺寸并淡入,适合卡片、弹窗等组件入场。
悬浮抬升
鼠标悬停时元素向上移动并加深阴影,营造悬浮立体感。
打字机效果
文字逐字显现并带有闪烁光标,模拟打字机输入效果。
骨架屏脉冲
骨架屏加载占位符的脉冲闪烁效果,提示用户内容正在加载中。
淡入下滑
元素从上方淡入并向下滑动,常用于导航栏、下拉菜单入场。
左侧滑入
元素从左侧滑入视口,适合侧边栏、抽屉菜单等组件。
悬浮发光
鼠标悬停时元素边框发出柔和光晕,适合 CTA 按钮和交互卡片。
滚动显现
元素进入视口时淡入显现,利用 IntersectionObserver 实现滚动触发。
视差浮动
元素随滚动以不同速率移动,产生深度视差效果,增强页面层次感。
文字渐变流动
文字颜色以渐变方式持续流动变化,吸引注意力的标题效果。
三点弹跳加载
三个圆点依次弹跳的加载指示器,轻量且易于实现。
背景渐变流动
背景渐变颜色持续缓慢流动变化,营造动态氛围感。
子元素错开动画
子元素依次错开执行入场动画,通过延迟差营造流畅的序列感。
模糊到清晰
元素从模糊状态逐渐变清晰并淡入,营造柔和的过渡入场效果。
聚光灯卡片
鼠标在卡片上方移动时,呈现手电筒照亮卡片局部的光影跟随效果。
磁吸悬浮
鼠标靠近目标元素时,元素会像被磁铁吸引一样向鼠标指针方向产生弹性位移。
弹性入场
元素以弹性缩放方式入场,从小尺寸弹跳过冲后稳定在原始大小,充满活力感。
右侧滑入
元素从右侧滑入视口,适合侧面板、抽屉菜单和分屏布局的入场效果。
旋转入场
元素从反向旋转并透明的状态旋转至正位并淡入,适合图标和趣味性入场。
抖动提示
元素在水平方向快速抖动,常用于表单校验失败或错误提示的视觉反馈。
3D 卡片翻转
卡片沿 Y 轴进行 3D 翻转,显示背面内容,需要透视容器和 backface-visibility 控制。
涟漪点击
点击时从触发点产生向外扩散的圆形涟漪效果,Material Design 风格的经典交互反馈。
数字滚动
数字通过垂直滚动方式从 0 滚动至目标值,适合数据面板和统计展示。
形状变形
通过 border-radius 过渡实现有机的 blob 形状连续变形,适合装饰性背景元素。
淡出下滑
元素向下滑动并逐渐消失,最常见的退场动画之一。
远景拉近
元素从远处快速拉近至原始尺寸,带有强烈的纵深感和冲击力。
跑马灯滚动
文字或内容水平无限循环滚动,常用于公告栏、品牌展示和合作伙伴列表。
微光扫过
光线从左到右扫过元素表面,Apple 风格的加载占位符效果。
脉搏跳动
元素以心跳般的节奏缩放跳动,常用于提示用户注意或表示活跃状态。
弹性回弹
元素被拉伸后像橡皮筋一样弹性回弹到原位,充满物理质感的趣味交互。
边框描边
边框像被画笔描绘一样逐渐显现,从一角开始沿四边绘制完成。
故障文字
文字以数字故障风格闪烁和偏移,带有赛博朋克美学的视觉冲击力。
缩放消失
元素缩小并淡出,适合弹窗关闭、气泡消失等退场场景。
右侧滑出
元素向右侧滑出视口并消失,适合侧面板关闭、抽屉菜单收起等退场效果。
折叠收起
元素高度从完整状态收缩至零并淡出,适合手风琴、FAQ 折叠面板等场景。
交叉淡化
两个元素交叉切换:一个淡出的同时另一个淡入,实现平滑的内容过渡。
滑动切换
新旧内容以水平滑动方式交替切换,旧内容滑出左侧的同时新内容从右侧滑入。
形态过渡
元素在两种形态之间平滑过渡,包括尺寸、圆角、颜色等属性的同步变化。
文字揭示
文字通过遮罩从下方逐行揭示显现,常用于英雄区标题和关键文案的戏剧性入场。
下划线绘制
鼠标悬停时下划线从左到右绘制展开,离开时反向收回,经典的导航链接交互效果。
进度条加载
进度条从左到右填充并带有光泽扫过效果,适合加载状态和进度指示场景。
弹簧缩放
元素以弹簧物理效果入场,多次过冲和回弹后稳定,比 bounce-in 更夸张的弹性感。
脉冲光环
从元素中心向外扩散的脉冲圆环效果,适合状态指示器、在线标志和注意力引导。
文字解密
文字以随机字符快速滚动后逐字解密为最终内容,常见于黑客终端和科技品牌网站。
3D 透视倾斜
鼠标在卡片上移动时,卡片随鼠标位置产生 3D 透视倾斜效果,营造沉浸式的空间深度感。
彩纸爆炸
点击时从触发点向四周射出彩色纸片粒子,适合成功状态、庆祝和游戏化场景的视觉反馈。
滚动翻页
滚动驱动的 3D 翻页效果,页面像书页一样沿 Y 轴翻转剥离,露出下一页内容。
滚动剥离
滚动驱动的页面剥离效果,当前页面像贴纸一样从右上角卷起剥离,露出下一层内容。