Can I make two transitions happen at the same time?

Question

Hi guys, I was trying to make 2 transitions happen simultaneously in my code below, however they never happen normally.

Lets say I want the bubble to rise (A) and change color (B) at the same time, during the same time span. Problem is that one transition happens instantenously while the other transitions normally it is never simultaneous. Could you help me out with my code?

How can I make the .bubble to move and change color at the same time?

https://code.sololearn.com/WdG5u3Wmo3A9/?ref=app

Answer 1

The change of linear gradient color is instant.
If you need changing linear gradient color, use what I suggested previously.

I tried to change your code (my code not set to public).
Check out the code below, its linear gradient color changing is gradually:

https://code.sololearn.com/W1vRthjfsEbn/?ref=app

Answer 2

I have make some comments on the css codes, should be not hard to understand. 😊

Answer 3

Try use
transition: all 4s;

However transition does not support linear-gradient, maybe you need to create 2 overlapping linear-gradients, use opacity to create the changing effect.

Answer 4

Just did that. Check the code. While the bubble rises gradually, it changes color instantly.

Answer 5

Yeah what you did solves it, but I am not sure I understand why 😂

Thank you anyways

Answer 6

Oh wow you played with the opacity! So cool man, thank you!