CSS Transition Width div box to expand to the left when mouse hovers over it

Question

I have an interesting problem I'm trying to solve. I have this donate button that's created using the following the 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;
}

And the css transition effect I want for this is that the donate button's orange background to expand. It will expand leftwards, towards bottom left, while the top and right frame of the button remains intact in the corner of the browser.

I tried applying the following css transition hover property like so:

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

The donate button only does the resizing on the bottom frame, but not the left frame and its width. But I'm suspecting I didn't know how to apply the transition delay and duration times combination so I couldn't really quite get the correct effect...

Can somebody point me to the right direction in how I can achieve this type of effect/animation? Any ideas?

Let me know if you need more info.

Answer 1

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

You are overwriting the transition property here two times, so that only the last value finally “survives”.

You have to put all three values you want to animate into one transition property,

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

Answer 2

Oh I found the answer.

I should be doing like this.

#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%;
}

I forgot to add the height property. That's why the height was expanded too quickly when hovering, thus no animation was possible.