I have an artifact of the material.opacity attribute popping up during animation loop playback

Question

I have an artifact of the material.opacity attribute popping up during animation loop playback

I seem to have an artifact in the opacity animation on every other animation loop. The order of the segments of the material.opacity a-animation seems to be messed up somehow. Is there a way to implement a material.opacity animation so that the sequences persist for each loop? Please see the animation of the codes.

<html>

<head>
  <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
</head>

<body>
  <a-scene>
    <a-assets>
      <a-mixin geometry="height:5" id="tall"></a-mixin>
      <a-mixin geometry="width:5" id="wide"></a-mixin>
      <a-mixin geometry="height:2" id="short"></a-mixin>
      <a-mixin geometry="width:2" id="narrow"></a-mixin>
      <a-mixin geometry="primitive:box" id="cube"></a-mixin>
      <a-mixin material="color:red" id="red"></a-mixin>
    </a-assets>
    <a-entity geometry="primitive:torusKnot;p:3;q:5" material="color:yellow" position="0 0 -10">
      <a-animation attribute="material.color" delay="0" from="yellow" to="blue" repeat="indefinite" dur="3600"></a-animation>
      <a-animation attribute="material.opacity" delay="0" from="1" to="0.75" repeat="indefinite" dur="1200"></a-animation>
      <a-animation attribute="material.opacity" delay="1200" from="0.75" to="0.25" repeat="indefinite" dur="600"></a-animation>
      <a-animation attribute="material.opacity" delay="1800" from="0.25" to=".75" repeat="indefinite" dur="600"></a-animation>
      <a-animation attribute="material.opacity" delay="2400" from="0.75" to="1" repeat="indefinite" dur="1200"></a-animation>
    </a-entity>
    <a-entity mixin="cube tall narrow red" geometry="depth:3" position="0 6 -20" light="type: point; intensity:1">
      <a-animation attribute="rotation" from="0 0 0" to="0 0 360" repeat="indefinite" dur="3600"></a-animation>
      <a-animation attribute="position" from="0 6 -20" to="0 6 0" repeat="indefinite" dur="3600"></a-animation>
      <a-animation attribute="scale" from="1 1 1" to="0.1 0.1 0.1" repeat="indefinite" dur="3600"></a-animation>
    </a-entity>
    <a-sky color="#abc"></a-sky>
  </a-scene>
</body>

</html>