title: Yo-yo effect on animation don't work when repeat is indefinite and direction is alternate using A-frame
body: <p>I'll make some indefinite animations inside my A-frame web application. My animation must play infinity and must have a yo-yo effect. Form an opacity of 0.25 to 0.75 an back each in 3000 millisecondes. For this I use next code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let box = document.createElement('a-box');
  box.setAttribute('src', '#outer');
  box.setAttribute('position', '0 0 -5');
  box.setAttribute('color', 'red');
  
  let anim = document.createElement('a-animation');
  anim.setAttribute('attribute', 'opacity');
  anim.setAttribute('from', '0.25');
  anim.setAttribute('to', '0.75');
  anim.setAttribute('fill', 'both');
  anim.setAttribute('repeat', 'indefinite');
  anim.setAttribute('dur', '3000');
  anim.setAttribute('direction', 'alternate');
  box.appendChild(anim);
  
  document.getElementsByTagName('a-scene')[0].appendChild(box);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://aframe.io/releases/0.5.0/aframe.min.js"&gt;&lt;/script&gt;
  
  &lt;a-scene&gt;&lt;/a-scene&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Like you can see this is not working. It goes from 0.25 to 0.75 in 3000 millisecondes and instantly back to 0.25 to repeat again. In the <a href="https://aframe.io/docs/0.5.0/core/animations.html#direction" rel="nofollow noreferrer">documentation of A-frame</a> stand this:</p>
  
  <blockquote>
    <p>When we define an alternating direction, the animation will go back and forth between the <code>from</code> and <code>to</code> values like a yo-yo. Alternating directions only take affect when we repeat the animation.</p>
  </blockquote>
  
  <p>If I use an number <em>(example the number <code>x</code>)</em> instead of indefinite, the yo-yo effect works great but stops when it's <code>x</code>-times repeated.</p>
  
  <p>What could I do for fix this issue?</p>