A-Frame как продолжить анимацию с последнего места?

Есть VR-демо на фреймворке A-Frame. При наведении курсора на модель, последняя начинает бесконечно вращаться, при отведении курсора с модели - анимация прекращается. Как сделать так, чтобы при повторном фокусе курсора модель продолжала вращение со своего последнего положения? Сейчас она рывком встает в свое первоначальное положение и только потом начинает вращаться.

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>VR Demo</title>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>

<body>
  <a-scene>

    <a-assets>
      <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
      <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
      <img id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
      <img id="pedestalTexture" src="/assets/metal.jpg">
      <audio src="assets/music.mp3" autoplay
      preload loop></audio>
      <a-asset-item id="avent" src="/assets/avent.obj"></a-asset-item>
      <a-asset-item id="avent_texture" src="/assets/avent.mtl"></a-asset-item>
    </a-assets>

    <a-entity id="car" obj-model="obj:#avent;mtl:#avent_texture" scale="1 1 1" position="0 0 5" rotation="0 -90 0" visible="true" material="">
     <a-animation attribute="rotation" to="0 270 0" dur="86400" easing="linear" direction="normal" repeat="indefinite" begin="mouseenter" end="mouseleave"></a-animation>
    </a-entity>

    <a-entity id="title" position="0 1.9 5" rotation="0 180 0" scale="4 4 4" text="align:center;opacity:0.5;value:Lamborghini Aventador" visible="false">
    </a-entity>

    <a-entity position="0 0 5" id="pedestal" geometry="mergeTo:null;primitive:cylinder;height:0.1;radius:2.5;segmentsRadial:72;" material="color:#ccc;metalness:0.7;src:#pedestalTexture">
    </a-entity>

    <a-sky height="2048" radius="30" src="#skyTexture" theta-length="90" width="2048"></a-sky>
    
    <a-light type="point" intensity="2" position="1 10 -3"></a-light>

    <a-plane src="#groundTexture" rotation="-90 0 0" height="100" width="100"></a-plane>

    <a-camera position="0 0 0" rotation="0 180 0">
      <a-cursor color="#FAFAFA">
    </a-camera>

  </a-scene>

  <script>
    var car = document.querySelector('#car');
    var info = document.querySelector('#title');
    car.addEventListener('mouseenter', function() {
      info.setAttribute('visible', true);
    });
    car.addEventListener('mouseleave', function() {
      info.setAttribute('visible', false);
    });
  </script>
</body>

</html>