Background
I trust many front-end engineers feel that reproducing animations with CSS is really hard.
Let me introduce you a really nice library which can save you from that, Lottie (produced by Airbnb).
Lottie is not restricted to Web development but also Android, iOS, React Native and Windows, which means you can use the same file source in all platforms.
Demo
Here is a online Lottie web player and Android sample app which you can play and preview the power of Lottie.
How To Use Lottie
Designers install Adobe After Effects Plugin to export their animation as JSON, then developers can play the file with Lottie. Really easy isn't it!?
Pros
Small fie sizes and better color reproduction
Lottie animation in JSON is extremely small size compared to WebP, APNG and GIF while maintaining good color reproduction.
Cross-Platform
As I mentioned earlier, library for Web, Android, iOS, React Native and Windows are supported, keeping the same file source in all platforms could reduce complexity.
High Manipulability
Lottie allows developers to manipulate the animation in anyway they like and also most importantly, you can program your animation to respond to any interaction, i.e. animation direction, playing speed, hover event...
Nice browser support
Lottie animates through just pure SVG and JavaScript, so there is really high support among browsers if your in web development.
Made by Airbnb
Lottie is created by Airbnb, Airbnb has always been active in the open source community, Airbnb have contributed lots of open source projects, the most known is the JavaScript style guide.
Wrap Up
You should try to use Lottie if your project has high demand in animations. It is simple to add cool animations to your projects with just a few lines of codes.