css - 我可以使用cubic-bezier()计时来进行3D变换反弹吗

Question

我正在尝试创建一个子菜单动画，让它从父菜单后面放入，就像在铰链上一样。我希望它稍微超过最终的静止位置，然后再回来。根据我对 cubic-bezier() 函数符号的理解，这应该是可能的。我不确定这是一个错误还是只是我的误解，但我似乎无法让它工作。我删除了所有供应商前缀(它们在演示中)，但这是我正在使用的代码:

HTML

<ul class="nav">
    <li>
        <a href="index.html">Home</a>
    </li>
    <li>
        <a href="about.html">About</a>
        <ul>
            <li>
                <a href="about.html#company">Company</a>
            </li>
            <li>
                <a href="about.html#team">Team</a>
            </li>
        </ul>
    </li>
    <li>
     <a href="contact.html">Contact</a>
    </li>
</ul>

CSS

ul {
    background-color:#99f;
    border-radius:10px;
    list-style:none;
    margin:0;
    padding:0;
}

ul:after {
    clear:both;
    content:'';
    display:block;
    height:0;
    margin:0;
    padding:0;
    width:100%;
}

.nav > li {
    display:block;
    float:left;
    perspective:600px;
    perspective-origin:100% 100%;
    transition:background-color .2s .4s;
}

.nav li a {
    color:#fff;
    display:block;
    padding:20px;
    text-decoration:none;
}

.nav li ul {
    background-color:#bbf;
    border-radius:0 0 10px 10px;
    position:absolute;
    transform:rotateX(-90deg);
    transform-origin:0 0 0;
    transition:transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav li:hover {
    background-color:#bbf;
    -webkit-transition-delay:0;
}

.nav li:hover ul {
    transform:rotateX(0);
    transition-delay:.2s;
}

.nav li li {
    white-space:nowrap;
}

Live Demo

所以根据this MDN article的信息, cubic-bezier() 可以 Y 轴上的值大于 1，从而实现反弹效果。理论上，这意味着我使用的 cubic-bezier() 应该使子菜单从 -90 度摆动到大约 15 度，然后回到 0 度。

不幸的是，我没有看到这种行为。我确实看到 cubic-bezier() 会影响动画的计时，而根本不使用计时函数，但它没有提供我期望的反弹效果。

我打赌这与从 -90 度到 0 度以及过去有关，但此时我已经迷失了方向。到目前为止，我无法找到任何有关使用 cubic-bezier() 曲线与 rotateX() 函数来生成此类效果的文档，甚至找不到说明是否有文档或 rotateX() 支持这种旋转或者到底发生了什么......帮助？

Answer 1

转换属性中的第三个数据是计时函数(正如您已经说过的)。以任何方式都可以改变过渡中发生的情况(例如，转到另一个坐标)

我猜你唯一的选择是使用关键帧。 (毕竟还不错)

当然你不会得到贝塞尔插值，但我认为指定 3 或 4 个关键帧就足够了

更正

我错了。

是的，可以使用三次贝塞尔曲线来实现弹跳效果。

您可以在此处获得有关此内容的精彩页面

easing transitions demo

我猜你的问题是，并非所有属性都可以“反弹”，或者更准确地说，并非所有属性都可以扩展到超出转换的 100% 限制。

对不起!