How to make animation of 0.5.0 Aframe work in 1.2.0 Aframe?

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v1.16.0/dist/aframe-extras.min.js"></script>

    
</head>

<body>
    <a-scene>

        <a-entity id="duck1" position="1 0 -3">
            <a-animation attribute="rotation" to="0 -360 0" repeat="indefinite"  easing="linear" dur="30000"> </a-animation>
            <a-entity color="#FF0000" scale="0.1 0.1 .1" position="0 0 1">
                <a-animation attribute="rotation" to="0 360 0" easing="linear" dur="4000" begin="mouseenter"> </a-animation>
                <a-box color="#FF0000" position="20 0 -10" change-color-on-hover="color: white" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
            </a-entity>
        </a-entity>

       
        <a-camera position="0 0.2 1.3"><a-cursor></a-cursor></a-camera>

      
    </a-scene>
</body>
</html>

The way animation is working here I want to make it look similar in 1.2.0 version of Aframe. I am trying to use the same formula. Here is what I am trying to do in 1.2.0 Aframe.

<html>
<head>
   <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
    
</head>

<body>
    <a-scene>

        <a-entity class="rota" id="duck1" color="#FF0000" scale="0.1 0.1 .1" position="2 0 -7" animation="property: rotation; to:0 -360 0; loop:true; easing:linear; dur:30000; pauseEvents: mouseenter; resumeEvents: " animation__mouseenter="property: rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter">
            <a-box class="rota" color="#FF0000"  position="20 0 -10"  scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
        </a-entity>
  <a-camera position="0 1.2 1.3"><a-cursor objects=".rota" ></a-cursor></a-camera>

      
    </a-scene>
</body>
</html>

In the second code it is working fine initially then it is getting stuck at one particular position. Can anyone help me in fixing this error and make it look similar to the code in version 0.5.0 Aframe.

Solution

Here is the 0.5.0 code in 1.2.0 syntax

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.1/dist/aframe-extras.min.js"></script>

    
</head>

<body>
    <a-scene>

        <a-entity id="duck1" position="1 0 -3"
                  animation="property: rotation; to:0 -360 0; loop: true; easing:linear; dur:3000">
            <a-entity color="#FF0000" scale="0.1 0.1 0.1" position="0 0 1"
                  animation="property:rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter">
                  <a-box color="#FF0000" position="20 0 -10" change-color-on-hover="color: white" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
            </a-entity>
        </a-entity>
       
        <a-camera position="0 0.2 1.3"><a-cursor></a-cursor></a-camera>      
    </a-scene>
</body>
</html>

Glitch here: https://glitch.com/edit/#!/animation-example-0-5-to-12-0?path=index.html%3A1%3A0

Not sure I completely understand what the code is supposed to do - e.g. there is a collision handler with #otherduck, but no #otherduck entity.

1.2.0 code seems to be doing the same as the 0.5 code, though.