css3能做什么动画效果

CSS3（配合一点现代 CSS 特性）能实现大量常见、甚至很炫的动画效果，而且性能通常比 JS 好（走 GPU 合成）。下面按“能做什么”来分类给你一个清晰清单：

一、基础过渡动画（Transition）

适合：交互反馈

• 悬停放大 / 缩小
• 颜色渐变（背景、文字、边框）
• 位移、透明度变化
• 阴影出现 / 消失

.btn {
  transition: all .3s ease;
}
.btn:hover {
  transform: scale(1.1);
  background: #ff6600;
}

二、关键帧动画（@keyframes）

适合：循环 / 复杂动画

• 加载动画（转圈、跳动）
• 闪烁、呼吸灯
• 跑马灯
• 入场 / 出场动画

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader {
  animation: spin 1s linear infinite;
}

三、变换动画（Transform）

性能最好，最常用

• 平移（translate）
• 旋转（rotate）
• 缩放（scale）
• 倾斜（skew）
• 3D 旋转（rotateX / rotateY）

.card:hover {
  transform: rotateY(180deg);
}

四、视差 & 滚动动画

适合：网页展示

• 背景固定（background-attachment）
• 滚动渐入（配合 JS 或 IntersectionObserver）
• sticky 吸顶动画

.bg {
  background-attachment: fixed;
}

五、弹性 & 物理感动画

• 弹跳（cubic-bezier）
• 回弹效果
• 惯性滑动

box {
  transition: transform .6s cubic-bezier(.34,1.56,.64,1);
}

六、文字动画

• 打字机（steps）
• 文字渐显
• 文字波浪
• 渐变文字流动

@keyframes blink {
  50% { opacity: 0; }
}

七、滤镜 & 混合动画

• 模糊（blur）
• 灰度（grayscale）
• 亮度（brightness）
• 颜色反转
• mix-blend-mode 混合

img:hover {
  filter: grayscale(100%);
}

八、3D & 空间动画

• 翻转卡片
• 立方体旋转
• 景深（perspective）
• 层叠悬浮

.scene {
  perspective: 800px;
}

九、响应式 & 状态动画

• 暗黑模式切换
• 折叠 / 展开
• 菜单滑出
• 进度条

十、CSS 做不了的（需要 JS）

• 复杂物理模拟
• 用户手势拖拽
• 精确时间轴控制
• 动画中途动态改参数

总结一句话

CSS3 能完成 80% 的网页动画需求，尤其是“展示型 + 交互反馈型”动画。

如果你愿意，我可以：

• 给你具体效果示例（代码可直接用）
• 按网站类型（官网 / 商城 / 后台）推荐动画
• 或帮你判断某个效果用 CSS 还是 JS 更好