A lot of topics here.
First of all. Do not lose focus. You are making banners, not an action movie. So, please do not export anything at 50Fps. A GIF uses 100ths of a second as a unit. It is better to round the numbers, for example, 10/100 will give you 10Fps. 5/100 20Fps.
You experimented with a ton of applications. I do not care which one you use. The problem is that you are not showing a specific project. If you are not doing a flat design, if you are using gradients or shadows, none will work properly.
If you are not limiting your palette, it will not work properly.
If it is a web animation, you need to define which type. Creating high quality animated backgrounds from Illustrator files Gif is only one option, and it is best for a flat design, loop style and the image will not be reescaled.
Is Adobe Animate widely used by professionals?
If it suits YOU, use it, if not...
I'm too scared that I'll invest and end up being disappointed.
You will be more disappointed if you do not try things for yourself.
it's best to use .avi or .mp4
Do not use avi. Only use mp4 for the web. With H264 or x264 codec and if it has audio with ACC compressor.
Yes, video is an option. Again, it depends on what is the look. For flat design and looped short things, Gif is ok. For video-like things, 3D animations, with shadows and gradients, probably a video is ok. But this depends on the viewing method for the user. Cellphones do not have video enabled by default to save bandwidth.
You must separate the steps to create an animated gif but think of the project globally.
- Style. Assets.
- Software to animate it.
- Software to optimize the Gif. The palette, the duration of the frames, and the "redraw" method.
(Edited after the comment)
Probably a simple fade on the text is a waste for an animated gif. Although it is well optimized, that example has over 400 frames. When I think of a modern animated gif I think on stuff like: https://dribbble.com/tags/gif_animation or stickers. Some loops has only 100 frames.
Fade in and fade out texts over an image could be good examples for a rotating JS banner or for CSS animations. Of course, you need to see what the platform can handle. If you need to send a single file a GIF is ok, whereas CSS and JS animations will be problematic.
You can also optimize your fade-in and fade-out texts doing them less dramatic. A faster transition will use fewer frames. Nobody expects (demands) a super smooth fade on an animated gif. ;)