css - 应用 translate3d 时的 CSS3 easeOutBack 问题

Question

如果我在选择器上默认设置 translate3d 属性，然后通过添加另一个类来更改 translate3d，则会导致bounceOutBack 三次缓动不起作用。它似乎只是默认为 easeIn

.content {
    width:200px;
    height:200px;
    background-color:red;
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    /*adding the below will mess up my bounceOutBack set above*/
    -webkit-transform: translate3d(0px, 0px, 0px);
}

如果你将这个类添加到下面的 .content 选择器中，并在easeOutback 上方设置了 translate3d 将不起作用。我没有看到任何其他自定义缓动类型的这个问题。很抱歉没有创造一个小提琴来看到这种情况发生。有谁知道为什么会这样？目前仅在 Chrome 中进行测试。谢谢你的帮助。

.content.animate {
    -webkit-transform: translate3d(300px, 0px, 0px);
}

Answer 1

好吧，可能是某种 Chrome 错误。

现在它工作正常

.content {
    width:200px;
    height:200px;
    background-color:red;
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    /*adding the below will mess up my bounceOutBack set above*/
    -webkit-transform: translate3d(0px, 0px, 0px);
}

body:hover .content {
    -webkit-transform: translate3d(300px, 0px, 0px);
}

小提琴