🎨 CSS动画·全攻略

30章 · 核心技法

动画基石：过渡 transition

property, duration, timing-function, delay 平滑状态变化

关键帧魔法 @keyframes

from/to 到百分比控制，多阶段复杂动画

动画属性全家桶

name, duration, timing, delay, count, direction, fill, play-state

缓动函数艺术

内置 & cubic-bezier() 自定义曲线，真实物理感

perspective, transform-style, perspective-origin 三维空间

transform变换矩阵

translate, rotate, scale, skew, matrix() / matrix3d()

动画性能优化

重排重绘, 合成层, will-change, transform & opacity

steps() 步进动画

逐帧动画, 精灵图, 打字机效果

动画事件与控制

animationstart/end/iteration, JavaScript 动态控制

贝塞尔曲线进阶

三次贝塞尔, 在线调试, 自定义缓动

多动画叠加技巧

多个 animation, 顺序/延迟/持续时间控制

动画填充模式

none, forwards, backwards, both 前后状态

动画方向与循环

normal, reverse, alternate, 结合 iteration-count

CSS变量与动画

var() 动态控制, 主题切换, 交互响应

响应式动画

媒体查询, 容器查询, clamp() 自适应

滚动驱动动画

Scroll-Driven API, scroll-timeline, view-timeline

Web Animations API

JavaScript 创建/控制动画, 灵活简洁

动画可访问性

prefers-reduced-motion, 动画开关, 友好设计

offset-path, offset-distance, offset-rotate SVG路径

交互动画实战

hover, focus, active 微交互设计

加载动画设计

旋转圆圈, 骨架屏, 加载状态

导航菜单动画

下拉, 汉堡, 侧边栏展开收起

卡片与列表动画

卡片翻转, 列表入场, 悬停放大

模态框与提示动画

淡入淡出, 缩放, 滑入, 遮罩层

页面转场动画

CSS 过渡 + JavaScript 路由切换

SVG动画基础

stroke-dasharray, stroke-dashoffset 描边动画

遮罩与裁剪动画

clip-path, mask-image 形状变换

filter: blur, brightness, contrast 等

混合模式与背景动画

mix-blend-mode, background-blend-mode 视觉效果

综合实战：品牌展示页

综合运用动画技法，构建动画设计系统