CSS 动效三剑客 · 交互演示
把前面讲的 transform / transition / animation 直接跑出来。每个卡片标注了用到的技术，对照概念看更清楚。
① transition + transform
悬停平滑过渡（需触发）
把鼠标移到上方虚线框区域 → 方块平滑右移 + 旋转 + 放大
② 纯 transform（瞬间）
无 transition，直接跳变
对比 ①：同样右移 150px，但毫无过渡，生硬跳过去
③ animation（自动循环）
@keyframes 多帧，无需触发
页面一加载就自动转圈 + 上下浮动，循环不止
评论
