Rotate marker with animation in Openlayers

I have this code:

this.posFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([-5.7,43.5])),
    name: 'pos'
});
var posStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [10, 10],
        anchorXUnits: 'pixels',
        anchorYUnits: 'pixels',
        src: 'car.svg'
    })
});
this.posFeature.setStyle(posStyle);
this.markerPosSource = new ol.source.Vector({features: [this.posFeature]});
this.layerPos = new ol.layer.Vector({source: this.markerPosSource});
map.addLayer(this.layerPos);

I would like to rotate the icon with an animation (in its rotation). Is it possible? If not, how to rotate without animation?

Thanks in advance!

Solution

To smoothly animate a rotation calculate the required rotation based on elapsed time each time the map rendered, e.g. for a complete rotation every 10 seconds:

<!DOCTYPE html>
<html>
  <head>
    <title>Icon Symbolizer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point([0, 0]),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
      });

      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 1],
          src: 'https://openlayers.org/en/v6.4.3/examples/data/icon.png'
        })
      });

      iconFeature.setStyle(iconStyle);

      var vectorSource = new ol.source.Vector({
        features: [iconFeature]
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource
      });

      var map = new ol.Map({
        layers: [vectorLayer],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [0, 0],
          zoom: 3
        })
      });

      var startTime = new Date().getTime();

      map.on('rendercomplete', function(e) {
        var elapsedTime = e.frameState.time - startTime;
        var rotation = elapsedTime / 10000 * Math.PI;
        iconStyle.getImage().setRotation(rotation);
        iconFeature.changed();
      });
    </script>
  </body>
</html>