<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0 -3" rotation="0 45 0" color="red" animation="property: rotation; from: 20 0 0; to: 20 360 0; dir: alternate; dur: 2000; loop: true;"></a-box>
      <a-sphere position="0 2 -10" radius="1.25" color="green" animation="property: object3D.position.z; to: -1.5; dir: alternate; dur: 2000; loop: true"></a-sphere>
      <a-box position="1 0 -3" rotation="0 -45 0" color="yellow" animation="property: rotation; from: 180 0 0; to: 20 0 -360; dur: 2800; loop: true;"></a-box>

      <a-camera position="0 1 -0.5" cursor-visible="true" cursor-scale="2" cursor-color="#0095DD" cursor-opacity="0.5"></a-camera>
      <a-light type="directional" color="#FFF" intensity="0.5" position="0 1.5 1"></a-light>
      <a-light type="ambient" color="#FFF" intensity="0.5"></a-light>
    </a-scene>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.