好的动效，是一种不打扰的温柔

一个元素从页面底部飞进来，未必让体验更好。但一个按钮在点击时给出轻轻的反馈，可能就能让人确信：刚才的动作已经被看见了。

动效的三个理由

在给界面添加动画之前，我会先问它承担哪一种职责：

1. **反馈：**告诉用户操作已经发生。
2. **关联：**帮助用户理解元素之间的空间关系。
3. **氛围：**为内容增添适量的情绪。

如果一个动画没有任何理由，删除它往往比继续调整缓动曲线更有效。

让距离决定时间

小范围的状态变化应该迅速。跨越更大距离的元素，则需要稍多一点时间，让人跟上变化。

.card {
  transition:
    transform 220ms ease,
    border-color 180ms ease;
}

.card:hover {
  transform: translateY(-4px);
}

这里的移动只有四个像素。它不是要表演，而是给人一个轻巧的提示：这是一块可以继续探索的内容。

停下来也是设计的一部分

页面不可见时停止绘制，元素离开视口时暂停动画，都是很容易被忽略的细节。

而 prefers-reduced-motion 不应该只是测试清单里的一个选项。对于一部分读者，持续运动可能会造成真正的不适。

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card {
    transition: none;
  }
}

如果动画本身是内容的一部分，还应该提供一个可以直接使用的暂停按钮。

让内容保持主角的位置

最好的动效，有时是读者没有特别注意到的动效。它让操作更自然，让页面更清晰，但不会站到文字前面。

我想追求的就是这种温柔：始终在场，但从不打扰。