How do they make sites like https://www.milwaukeeballet.org/? How does the transition even take place? Do they use Animate.css or CSS transition effects?

Answer 1

They're using CSS transitions / animations (keyframes) with a combination of Javascript. Probably jQuery if I had to guess. How I would approach it would be to use a combination of CSS transitions. You can add a transition delay as well as use CSS keyframes to create the "page load" effect. For people with slower computers, the performance effects of doing something like this probably outweigh the cool factor which is always something to consider when using any kind of CSS effect.

Once the page loads, they have different looping videos, probably done by using absolute positioning with a video. I've done sites like these before with a looping video in the background and the performance killed users who were on a bad wifi connection. They also are loading multiple videos when a picture would probably suffice. Would not recommend doing this.

If you research jQuery .animate() and CSS transitions / keyframes you'll get an idea about how to create these sorts of effects.