How to create animation on the linestring with arrow sign?

Question

I'm able draw the linestring on the map based on the data but I want to draw the animated linestring as shown in attached image. Could anyone help me out for this from #openlayers community?

Inside myLayerFeature I have list of feature with its coordinates and looping through each feature to draw line and adding the gif image on that with taking reference of the following link: https://openlayers.org/en/latest/examples/feature-move-animation.html

$(myLayerFeature).each((index, mapitem1) => {
                        moveArrowOnLine(mapitem1.geometry);
                    });

function moveArrowOnLine(geometry) {
                debugger
                var startCoordinates = geometry.coordinates[0];
                var endCoordinates = geometry.coordinates[1];


                const startMarker = new ol.Feature({
                    type: 'icon',
                    geometry: new ol.geom.Point(startCoordinates),
                });
                const endMarker = new ol.Feature({
                    type: 'icon',
                    geometry: new ol.geom.Point(endCoordinates),
                });
                const position = startMarker.getGeometry().clone();
                const geoMarker = new ol.Feature({
                    type: 'geoMarker',
                    geometry: position,
                });

                const styles = {
                    'route': new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            width: 6,
                            color: [237, 212, 0, 0.8],
                        }),
                    }),
                    'geoMarker': new ol.style.Style({
                        image: new ol.style.Icon({
                            scale: -0.04,
                            anchor: [0, 0.8],
                            anchorXUnits: 'fraction',
                            anchorYUnits: 'fraction',
                            opacity: 1,
                            projection: '3857',
                            src: './images/left-arrow.png',
                        }),
                        image: new ol.style.Circle({
                            radius: 20,
                            fill: new ol.style.Fill({ color: 'red' }),
                            stroke: new ol.style.Stroke({
                                color: 'black',
                                width: 2,
                            }),
                        }),
                    }),
                };

                const vectorLayer = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        features: [geoMarker, startMarker, endMarker],
                    }),
                    style: function (feature) {
                        return styles[feature.get('type')];
                    },
                });
                map.addLayer(vectorLayer);
                startAnimation();
            }