制作网页动画

很可能有一个适用于该情况的应用程序。

很可能有一个适用于该情况的应用程序。

不。原型设计工具有很多，而且大多数都和设计工具紧密相关。我是一名开发人员，我目前的项目设计已经完成了99%。

那么动画库怎么样？

当然。我遇到过几个库，但它们内置的动画我永远不会认真使用。将两个动画合并成一个流畅的动作似乎也很难。由于我们试图为用户创造有意义的体验，我们需要制作自己的自定义动画。

我们假设您了解基础知识。

编写 CSS 动画在概念上很容易，但将它们组合在一起，使其看起来流畅且符合预期却非常困难。让我们来看一些高级的东西。我在研究这个主题的时候，看到有人分析了 stripe.com 的导航下拉菜单。下拉菜单不可能那么高级吧？我开始自己分析，结果发现，一个“简单”的下拉菜单里竟然蕴含了这么多知识。我之前从未听说过CSS 属性will-changeor transition-property。另一个让我困惑的地方是，这个下拉菜单看起来像是“向下滚动”的。

这是怎么回事？我花了一段时间才意识到，我可以调整动画时间，这样才能真正看到效果。

好吧，他们是怎么做到的呢？我继续深入挖掘。

如果我能找到导致倾斜的 CSS 属性，我就能把它和动画关联起来。我切换了 CSS 属性，直到找到一个transform: rotateX(-15deg);可以消除倾斜的属性。太棒了。但我不明白。*谷歌了一下 rotateX。我发现自己在 Codepen 里……

好吧，搞什么鬼？我继续深入研究 CSS……

答对了，perspective: 2000px;成功了。这又是一个我从未用过的 CSS 属性。那么，元素是如何失去透视效果，变成普通矩形的呢transform: none;？

呼吸沉重

• will-change是针对浏览器的渲染优化。浏览器可以针对变化进行一些计算，使其更加流畅。
• transition-property是应该随时间变化的属性transition-duration
• perspective“确定 z=0 平面与用户之间的距离，以便为 3D 定位元素提供一些透视效果”

哇

所有这些就是为了制作一个下拉菜单。但这正是我在动画方面寻找的细节。我最初的想法是，元素应该从最终位置 -> 变形到动画起点 -> 回到最终位置。这启发了我，让我想到了从变形位置开始，然后在动画过程中移除变形。

还有更多东西要学！祝你好运！