According to this QA, by using "gifler" library, we can use animated gif to render on canvas-based openlayers. can openlayers 3 render the animated marker using gif
But it cannot accept apng/webp, and also, "gifler" library is bit old, it is tough to use with the latest EcmaScript or TypeScript.
Are there any other way to enable this?
Eventually, I couldn't find a way to make it work, so I started developing it myself. Animated GIF, APNG, and Animated webp can be frame-split and even animated on a canvas context in the following.