夸张的CSS轻松高度过渡

Question

如何在this website的下拉菜单转换中看到，如何实现夸张的轻松高度转换？ Normal CSS transitions比我在这里呈现的更加线性。谢谢！

Answer 1

您可以使用Cubic Bezier timing functions定义自己的自定义宽容。

例如，您可以执行以下操作：

，而不是标准linear缓动

.selector {
    transition: right .5s cubic-bezier(.55,.04,.27,.91);
}

要使用易于使用的工具制作自己的缓和功能，可以试试cubic-bezier.com。