CSS3在应用translate3d时缓解内陆问题

如果默认情况下在选择器上设置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选择器中，并且将translate3d设置在easeOutback上方，则该类将不起作用。我没有看到这个问题与任何其他自定义宽松类型。很抱歉，没有创建一个小提琴看到这种情况发生。有人知道为什么会这样吗？目前仅在Chrome中进行测试。谢谢你的帮助

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

---

嗯，可能是某种铬臭虫

现在可以了

.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);
}

---

您的隐式翻译为0,0,0。我认为没有必要具体说明这一点。举个简单的例子：悬停动作对我来说很有效。再看一眼，添加一个简单的悬停效果，以便在构建转换时简化操作。我知道设置0,0,0不需要设置。但是，实际上，对于我正在做的事情，我从-200px的translateX开始。我刚刚设置了0,0,0，也许可以理解为什么会发生这种情况。我可以在那里输入任何数字，只要你从初始选择器中指定它，放松就不起作用。