Why aren't my A-Frame animations looping properly?

I am trying to get these animations to loop, but they only run once each then stop. My code is as follows

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
    <a-box height=0.1 width=3 depth=7 position="0 3.5 0" color="#964800" rotation="45 0 0" 
    animation__first="property:rotation; from:45 0 0; to:-45 0 0; dur:300 startEvents:loaded, animationcomplete__second;"
    animation__second="property:rotation; from:-45 0 0; to:45 0 0; delay:500; startEvents:animationcomplete__first;">
        <a-cone radius-bottom=1.5 radius-top=1.5 height=1.5 position="0 .75 2" color="#964800"></a-cone>
    </a-box>
</a-scene>

I've tried changing the first and second to 1 and 2 with no change and I tried changing the order of loaded and animationcomplete which, once again, changed nothing.

You're missing a semicolon in the first animation (so i guess the startEvents aren't properly parsed at all, and the first animation starts on loaded by default. With the semicolon it works properly:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<a-scene>
    <a-box height=0.1 width=3 depth=7 position="0 3.5 -5" color="#964800" rotation="45 0 0" 
           animation__first="property:rotation; from:45 0 0; to:-45 0 0; 
                             dur:300; startEvents:loaded, animationcomplete__second;"
           animation__second="property:rotation; from:-45 0 0; to:45 0 0; 
                             delay:500; startEvents: animationcomplete__first;">
        <a-cone radius-bottom=1.5 radius-top=1.5 height=1.5 position="0 .75 2" color="#964800"></a-cone>
    </a-box>
</a-scene>

<!-- end snippet -->