CSS 动画效果大全

元素从完全透明逐渐显现，最基础也最常用的入场动画。

元素逐渐变为透明，适合移除、关闭提示等退场场景。

淡入的同时从下方轻微上移，常用于卡片列表依次入场。

淡入同时从上方下落，适合下拉菜单与提示条。

从左侧滑入并淡入，适合侧边栏与抽屉。

从右侧滑入并淡入，适合通知与浮层。

淡入的同时从 92% 放大到原始尺寸，比单纯淡入更有力度。

伴随轻微模糊消退的淡入，适合强调层级切换。

透明度与对比度同时收敛，像胶片溶解。

整体从下方滑入，位移幅度大于淡入上移。

从上方滑入，适合展开式菜单。

从右侧向左滑入，常用于轮播切换。

从左侧向右滑入。

带弹性回弹的滑入，视觉更活泼。

横向滑入并带方向性模糊，模拟高速运动残影。

新内容从下往上顶替旧内容，常见于步骤切换。

用 clip-path 从左向右揭开，像幕布拉开。

从底部向上揭开内容，适合图片与标题。

从小放大到正常尺寸，适合模态框与弹层。

缩小并淡出，用于关闭弹层。

快速放大并轻微过冲，模拟弹出感。

周而复始地轻微放大缩小，适合提示可点击。

两段节奏不同的放大，模拟心跳。

以中心为原点从零放大，弹性稍强。

先横向压扁再回弹到正常，适合按钮反馈。

缓慢的缩放循环，让静态元素保持生命感。

匀速无限旋转，适合加载指示器。

旋转 360 度一次后停止。

左右小角度摇摆，常用于图标强调。

以顶部为轴的钟摆式摆动。

匀速慢转，适合加载指示与装饰环。

从 -180 度转到 0 度并淡入，像盖章落下。

以左上角为支点像铰链一样摆落。

沿 Y 轴翻转 180 度，适合正反面卡片。

经典的上下弹跳，适合提示箭头。

幅度更小、更柔和的弹跳。

横向挤压变形，像果冻抖动。

纵向拉伸再回弹，富有弹性。

分数段缩放带过冲，落地感更强。

先蓄力下蹲再起跳，配合轻微拉伸。

从高处落下并回弹两次，模拟重力。

左右快速抖动，常用于表单校验失败。

上下快速抖动。

透明度反复切换，用于强提示。

缩放加旋转的组合强调动画。

用外扩阴影制造一圈光环脉冲。

快速小幅左右摆动，用于「不正确」的反馈。

高频率横向抖动，适合错误提示与通知。

横竖交替拉伸，像橡皮筋弹动。

绕水平轴翻转 180 度，需要透视才有立体感。

绕垂直轴翻转，适合卡片正反面切换。

从背面翻转到正面并淡入。

从侧面翻转到正面。

带透视沿 X 轴翻入，边缘有厚度错觉。

模拟立方体绕一条边翻滚到下一面。

沿 Y 轴翻出并淡出，用于退场。

鼠标移入时元素上浮、阴影加深，卡片与按钮最常用的悬浮反馈。

移入时轻微放大，适合图标、头像与图片缩略图。

移入时轻微缩小，营造「被聚焦、被按住」的压缩感。

移入时旋转一定角度，带一点俏皮的手感。

移入时外圈亮起一圈光晕，适合强调可点击的操作。

一道斜向高光从左侧扫过，常用于按钮与卡片。

移入时绕 Y 轴翻转半圈，适合正反面信息切换。

沿 Z 轴上抬并轻微俯仰，做出离屏幕更近的错觉。

移入时内部的图标单独放大旋转，主体不动，层次更清楚。

按住时缩小，松开回弹，最接近真实按键的反馈。

按住时横向变宽、纵向压扁，像被手指按扁。

按下后先缩再弹，用一个短促的动画强调点击已生效。

按下瞬间外扩一圈波纹，Material 风格的核心反馈。

按下时出现双层光圈，适合需要明显确认的次要操作。

按下时快速横向晃动，用于「不允许」或校验失败的反馈。

悬浮放大、按下缩小，一个类就能给按钮配上完整手感。

悬浮浮起、按下回落，模拟真实按键的上下行程。

底部厚边做成立体按键，按下时厚边变薄。

悬浮后光晕持续呼吸，把视线拉到主操作上。

悬浮时背景渐变横向推过去，色彩更有流动感。

悬浮时描边从中心放大浮现，适合次级主行动按钮。

悬浮时内部箭头向右推移，暗示「继续前进」。

点下时白色波纹从中心扩散，深色按钮上尤其明显。

悬浮时一道高光斜扫过按钮，电商与营销页常见。

用宽度动画模拟逐字打出的效果，配合等宽字体更自然。

打字机光标闪烁，通常与打字动画配合。

渐变高光横扫，用作加载骨架屏。

缓慢上下漂浮，营造轻盈感。

从模糊到清晰，适合图片与标题。

阴影大小周期性变化，模拟发光呼吸。

背景渐变位置缓慢移动，形成流动感。

从中心向外扩散并淡出，模拟水波。

圆角比例变化，方块与圆之间来回形变。

一条高光从左扫到右，占位骨架屏常用。

渐变文字的高光横向流动，适合标题。

不规则亮度跳变，模拟老式霓虹灯管。

位移上扬同时阴影变大，营造离地感。

hue-rotate 全环旋转，让任意颜色缓慢变色。

用 clip-path 从右往左擦除，可做退场。

裁切角在尖角与斜角之间往复，科技感边框。

上下轻移的循环，用于提示可继续滚动。