缓出，缓入；缓入，缓出

我们在最近一期 ShopTalk 节目中与 Val Head 和 Sarah Drasner 谈到了缓动 一集。缓动在动画和过渡中非常重要。结合持续时间，它对变化的“感觉”有很大影响。如果您在一个项目中认真对待动画作为品牌的一部分，则应定义并一致地使用缓动。

也就是说，它是在以下方面取得平衡：

• 制作/使用与您的品牌相匹配的缓动
• 遵循关于何时使用哪种类型的缓动较为合适的“规则”

让我们看看一个特定的最佳实践，据我所知。但首先，另一个观察。

CSS 中的默认 transition-timing-function（缓动）是 ease。

.thing {

  /* The default, as in, you get this without defining anything */
  transition-timing-function: ease;

  /* Also the same as */
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  
}

它非常好！我几乎从不改变它。我设置和调整持续时间，通常将其保留为 ease。太好了，也许吧？我想知道如果 CSS 默认使用更无聊/毫无生气的 linear 缓动，我们是否会更积极地选择合适的缓动。尽管我发现 linear 在变化非常小的时候（例如，只移动几个像素或颜色变化的色调）非常有用。

ease 定时函数之所以如此好，也许是因为它是 ease-in-out 的变体。也就是说，变化在开始和结束时都缓慢发生，并且只在中间某个地方加速。这为变化提供了柔和的边缘（比喻），并且通常感觉良好。

还有其他两个内置的 CSS 定时函数

• ease-in：开始时缓慢，结束时快速/突然
• ease-out：开始时快速/突然，结束时缓慢

虽然以这种方式看待它们会产生某种直观的意义，但一般的“规则”（用引号括起来）是在与它们名称相反的情况下使用它们

• ease-in：当事物移出时。
• ease-out：当事物移入时。

想想一位骑士的侍从。当骑士呼唤他们时，他们最好跑着过来，然后慢慢停在原地。当骑士让他们离开时，他们最好尽快离开那里。

这感觉像是一种最佳实践。就像动画在两方面都表现得礼貌和服从。赶紧过来，但要保持镇定。离开时更快，不要耽搁。

以下是与这种思维方式相对应的 CSS。这会根据所讨论的元素是显示还是隐藏以及时间来更改缓动函数。

.container .alert {

  /* This timing applies on the way OUT */
  transition-timing-function: ease-in;

  /* Quick on the way out */
  transition: 0.2s;

  /* Hide thing by pushing it outside by default */
  transform: translateY(130%);

}

.container.alert-is-shown .alert {

  /* This timing applies on the way IN */
  transition-timing-function: ease-out;

  /* A litttttle slower on the way in */
  transition: 0.25s;
  
  /* Move into place */
  transform: translateY(0);

}

查看 Chris Coyier 在 CodePen 上创建的笔 “进入”和“退出”的不同缓动 (@chriscoyier)。

我根据 Val 和 Sarah 提到的聪明想法以及最近看到的 Google 关于这种精确移动的 设计规范 构建了这个基于 CSS 的演示。

我们在此处使用的动画时间也属于“规则”范围，正如 Val 通常描述 的那样：简单界面移动为 0.1-0.2 秒，更复杂或更大的移动最多为 0.5 秒。

总结

• ease 非常好，但您可能希望自定义一些适合您品牌的缓动
• ease 和 ease-in-out 在两侧都有柔和的边缘，但有时使用 ease-in 或 ease-out 更合适
• 您不必对动画的两个方向都使用单个缓动，您可以切换它
• 您还可以更改持续时间

此外，这里有一个方便的参考，列出了默认值及其匹配的 cubic-bezier，以防您想从其中一个开始并进行自定义

.examples {

  transition-timing-function: linear;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);

  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

  transition-timing-function: ease-in-out;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

  transition-timing-function: ease-in;
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

  transition-timing-function: ease-out;
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);

}