去年帮一个做家居电商的电商动效朋友改版商品详情页，原本跳出率高达68%。网站我没动任何文案和图片，前端只加了三个动效：加购按钮点击时的页面弹性缩放、SKU选择时的实现颜色渐变过渡、以及价格数字滚动变化。电商动效两周后跳出率降到41%。网站这事让我确信，前端电商前端的页面动效不是装饰，是实现转化率工具。

但很多开发者一上来就堆CSS keyframes，电商动效结果页面像得了帕金森。网站我见过一个卖鞋的前端网站，每个商品卡片都在无限旋转，页面用户滚动三秒就头晕。实现动效的第一原则是克制——只在用户产生操作意图时给出反馈，而不是替用户做决定。

加购按钮：0.3秒的信任感

用户点击“加入购物车”后，最怕的是没反应。传统做法是改按钮文字为“已添加”，但文字切换太突兀。我习惯用transform: scale(0.95)配合transition: transform 0.15s ease，让按钮先轻微下压再弹回。同时背景色从品牌色过渡到深色，像按下去的物理开关。

更关键的是购物车图标。很多网站只让数字+1，但用户视线不在那里。我会让图标做一次rotate(-10deg)再回正，同时数字用@keyframes做垂直滚动替换。这0.3秒的动画，比弹窗提示“添加成功”有效得多——后者打断浏览，前者只是确认。

SKU选择：用颜色过渡代替生硬切换

选颜色或尺码时，传统做法是点击后边框变红。但用户视线会跳一下。我改成：点击时该选项背景色从透明渐变到浅灰，同时边框宽度从1px过渡到2px。用transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)，让变化有“重量感”。

有个细节：如果用户快速切换多个SKU，动画不能排队。用transition而不是animation，因为前者可被新状态打断，后者会强制播完。这点在移动端尤其重要——手指滑动时，动效必须跟手。

价格滚动：数字的信任游戏

促销价从299降到199，直接替换数字太干。我会把价格拆成三个span，每位数字独立做translateY动画。旧数字向上滑出，新数字从下方滑入，时长0.4秒，缓动函数用ease-out。用户会下意识盯着数字变化，这比静态价格更有“捡到便宜”的感知。

但别滥用。我见过一个网站连库存数量都做滚动，结果用户以为系统在实时更新，反而焦虑。动效要匹配信息的重要性——价格、优惠、库存紧张提示值得动，普通参数不值得。

性能陷阱：别让动效变成卡顿源

最容易被忽略的是will-change属性。给频繁动画的元素加上will-change: transform，浏览器会提前提升为合成层。但别给所有元素加，否则内存爆炸。我通常只在购物车图标和价格数字上用。

还有，移动端务必用transform和opacity做动画，别碰width、top这类触发重排的属性。有次我用了left做侧边栏滑入，安卓低端机上直接掉到20帧。换成translateX后流畅了。

最后说个观察：动效的“正确”时长不是固定的。按钮反馈0.15秒，页面切换0.3秒，价格变化0.4秒——这些数字来自我反复用慢放视频看用户手指动作。你可以在Chrome DevTools里把动画速度调成10%，观察每个帧的衔接。好的动效像呼吸，用户感觉不到，但一旦去掉，页面就死了。