What output format from AE to produce animation on web page?

A few things to make note of regarding this topic:

• If you use Best Settings - Lossless with Alpha in the After Effects Render Queue, Photoshop will use the alpha for Transparency when you choose File > Export > Safe for Web (Legacy)... to create an Animated GIF.
• Photoshop has a limit of 500 frames when saving an Animated GIF. If your video file is longer than 500 frames, it will be trimmed in the exported Animated GIF file. There's nothing in the Photoshop Timeline Panel nor in the Save for Web Window that alerts users to this limit. You just have to be aware of it.
• While Adobe Media Encoder has Animated GIF as a Format, it does not provide the options a user needs for creating a GIF like Photoshop does. Also, there's a known issue with white (#FFFFFF) shifting to off-white. The color table issue can be corrected in Photoshop if you've already exported an Animated GIF from AE via AME.
• If you need to create Animated GIF files from After Effects frequently, I highly recommend GifGun for After Effects. https://aescripts.com/gifgun/

Any animation you create in After Effects can be converted to an animated gif. The trick is to create a comp that has no duplicate frames. 

Let's say you want to animate a square into a circle and have it change colors as it changes. You want the transition to take a half-second, then the square to stay where it is for 20 seconds, then the square turns into a circle over the next half second and stays there for 20 seconds before it changes back to a square.

A good frame rate for an animated gif is 10 fps so set up a 10 fps comp that is about 10 seconds long.

In your timeline, you start with a Rectangle shape layer and animate the roundness from 0 to half the size of the square over 5 frames. Also, animate a color change for the rectangle fill over the first 5 frames. move forward 1 frame and set another color keyframe, then move 5 frames and change the color and add a new keyframe for roundness. Move forward 1 more frame and animate roundness from half the size of the rectangle to 0, set the out point of the work area to the last keyframe, trim the comp to the work area, add the comp to the render cue and render using the Lossless with alpha preset. 

Open the rendered movie in Photoshop. You should get the timeline and every frame has a duration. Set the 6th keyframe duration to 10 seconds, then set the last frame to 10 seconds and export a looping animated gif. You'll get something like this. The file size will be very small, there will be no duplicate frames, it will have transparency, and it will loop forever changing from a square to a circle and a circle to a square every 40 seconds.  If you only want the animation to run once, just turn off the loop forever.

If that does not work for you then we need a very detailed description of your design and possibly some screenshots.

More info: My goal is either a "video" or an animated gif/png with a transparent background. My animation is simple, with a simple fade-in, a line that grows along a path, and some elements that turn "on" at certain points.

What I've learned:

1) The HTML5 Video tag will accept mp4, OGG, or WebM. I'm unfamiliar with the other two, but mp4 is not going to allow transparency. So, no go with mp4/HTML5.

2) Animated GIF will allow transparency, but the bits are either on or off. So, no go with Animated GIF.

3) I have no clue yet how, or whether, I can output an APNG file with AE, or whether such a file might "play" in my browswer the way an animated GIF does. Still working on it.

I would really appreciate anyone who could shorten my learning curve here.

Thanks!