CSS Transition Width div框在鼠标悬停在其上时展开到左侧

Question

我有一个有趣的问题，我正试图解决。我有这个使用以下css创建的捐赠按钮。

#donate-button {
    width: 211px;
    position: absolute;
    background: #FFBC2F;
    color: #FFF;
    left: 1140px;
    right:1340px;
    z-index: 30;
    top: 0px;
    transition:width 2s;
    transition:left 2s;
    transition:bottom 2s;
}

我想要的css过渡效果是捐赠按钮的橙色背景扩展。它将向左展开，向左下方展开，而按钮的顶部和右侧框架在浏览器的角落保持完整。

我尝试应用以下css过渡悬停属性，如下所示：

#donate-button:hover {
    width:33%;
    left:73%;
    bottom: 53%;
}

捐赠按钮仅对底部框架进行大小调整，但不对左框架及其宽度进行调整。但我怀疑我不知道如何应用转换延迟和持续时间组合，所以我无法真正得到正确的效果......

有人能指出我如何实现这种效果/动画的正确方向吗？有什么想法吗？

如果您需要更多信息，请与我们联系。

Answer 1

transition:width 2s;
transition:left 2s;
transition:bottom 2s;

你在这里覆盖 transition属性两次，这样只有最后一个值最终“幸存”。

您必须将想要动画的所有三个值放入一个 transition属性，

transition:width 2s, left 2s, bottom 2s;

Answer 2

哦，我找到了答案。

我应该这样做。

#donate-button {
    height:80px;
    width: 211px;
    position: absolute;
    background: #FFBC2F;
    color: #FFF;
    left: 1140px;
    right:1340px;
    z-index: 30;
    top: 0px;
    transition:height 2s ease-in, width 2s ease-out, left 2s ease-out, bottom 2s ease-in;
}

#donate-button:hover {
    height:30%;
    width:53%;
    left:77%;
    bottom: 23%;
}

我忘了添加高度属性。这就是为什么悬停时高度扩展太快的原因，因此无法进行动画制作。