Let's say I have an element and I want to animate it (for example) like this:

Animate from left: 0 to left:500 over a duration of 5 seconds.

But - half way through that animation (after 2.5 seconds), I then want to start another animation on the same element like this:

Animate from top:0 to top:200 over a duration of 2.5 seconds. (so in this instance both animations end at the same time but the second one starts 2.5 seconds after the first.

But - this doesn't need to just be on position, of course. It could equally be animating the size of an object but towards the end of the size animation, the element starts to change colour..

Is there any way to achieve this?