We usually do this to because two css values that should happen one after the other, actually happen at the same time. I believe this happens because of browser style queueing (in order to minimize reflows). Eventually, the animation doesn't look like it should.

So, putting the second style change in a timeout, guarantees the required outcome.