glidex | library using Glide for faster Xamarin | Form library

Both are good candidates to use in your project. However do note that the Web Animations API is not (yet) supported in Safari, so it will break there.

A couple of things I'm noticing in your code.

• You are using margins to change to position of your elements. Try to use thetransform property since it is more performant for animations and does not interfere with other elements in the flow of the document. My guess is that this causes the interference between your elements.
• You want to fire the next animation when the previous animation is done and you accomplish that by using the finish event. Although that is an option when the duration of the animation is dynamic, it does not seem relevant to your case. When firing consequent animations you could use the delay property of an animation.

What you want to achieve

The first animation has to start instantly and has a duration of 1500 milliseconds. The seconds animation has to start after the first one has finished. Simply add a delay of 1500 milliseconds to make it start after the first one. The third animation has to start after the first two animations are finished. This adds up to 1500 * 2 milliseconds in a delay of the starting time. I think that this should get you a bit further.

In CSS it would look like this: