Note: In general the answer I wrote applies to the more complex animations, like your example 1. Some of the other examples you posted are pretty simple and can be addressed just talking to your team.
If you want to animate an animation, and want the final animation to be like the one you already animated... Just prepare the animation to be used as the final animation...
Aka, learn the proper way to do it from start.
But how are designers communicating the timing, curves, etc to developers!!!???
The line is blurrier than you think. For me, the design is not making things look pretty, but also functional. And to be functional you need to really understand the medium where it is going to be published. It is not about letting someone else solving the technical problem. Do it yourself.
There are so many people doing animations like this right now so I KNOW there has to be a way!
Yes, there are people actually doing them. That is the point. You already mentioned svgator which makes an SVG animation that can be used as it is. That is not a mockup, that could be the final file.
You need to dive into the different ways to do animations for the web.
Final note. It will be a lot easier in human resources in the short term and in the long one that you learn how to animate using different tools, than a coder to learn how to make an animation look right. The main factor is: you are interested, they are probably not. Animating is about perception, feeling, and those subjective things are harder to learn than a technical aspect.
But in the end, they will probably need to learn that same tool anyway.
For the simpler examples, I will not consider them to really be animations, but user-triggered events, and there are some frameworks for that, like http://imakewebthings.com/waypoints/guides/getting-started/