title: How to set Fade in or Fade out on <a-sky>
body: <p>Is possible to add fade in or fade out animations on a sky in aframe?</p>
  
  <p>How can I add animations when the user hovers their cursor over the ball?</p>
  
  <p>In this example when you hover your mouse, the background will change but w/o animations.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>AFRAME.registerComponent('set-sky', {
    schema: {
      default: ''
    },
    init() {
      const sky = document.querySelector('a-sky');
      this.el.addEventListener('click', () =&gt; {
        sky.setAttribute('src', this.data);
      });
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://rawgit.com/aframevr/aframe/b813db0614ac2b518e547105e810b5b6eccfe1c8/dist/aframe.min.js"&gt;&lt;/script&gt;
  &lt;a-scene&gt;
    &lt;a-camera position="0 2 4"&gt;
      &lt;a-cursor color="#4CC3D9" fuse="true" timeout="10"&gt;&lt;/a-cursor&gt;
    &lt;/a-camera&gt;
  
    &lt;a-sphere color="#F44336" radius="1" position="-4 2 0" set-sky="https://c3.staticflickr.com/2/1475/26239222850_cabde81c39_k.jpg"&gt;&lt;/a-sphere&gt;
  
    &lt;a-sphere color="#FFEB3B" radius="1" position="4 2 0" set-sky="https://c2.staticflickr.com/2/1688/25044226823_53c979f8a1_k.jpg"&gt;&lt;/a-sphere&gt;
  
    &lt;a-sky&gt;&lt;/a-sky&gt;
  &lt;/a-scene&gt;</code></pre>
  </div>
  </div>
  </p>