html - CSS 过渡宽度 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%;
}

我忘了添加高度属性。这就是为什么在悬停时高度扩展得太快，因此没有动画是可能的。