I have two elements with animation. The first elements animation lasts 1 second and has an easing curve of cubic-bezier(0.5, 0, 0.5, 1) (easing in and out). The second elements animation starts 0.5s after the first one, lasts for 0.5s and has an easing curve of cubic-bezier(0, 0, 0.5, 1) (only easing out). I thought this would make their animation match up since both of the curves end with the same easing, but the first element moves a bit faster mid motion than the second one. How do I make the animation match up? And for that matter, how do I make any ease-in-out curve match up with an ease-in/ease-out curve in a similar situation? Visual Example on JSFiddle