<!DOCTYPE html>
<html>
  <head>
    <title>Animations - 03 - Chaining</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene background="color:lightblue">
      <a-box
        position="-1 1.6 -2"
        scale="0.5 0.5 0.5"
        color="#ff0000"
        animation="property: height; from: 1; to: 2; dur: 1000; delay: 0"
      >
      </a-box>

      <a-box
        id="sec"
        position="0 1.6 -2"
        scale="0.5 0.5 0.5"
        color="#00ff00"
        animation="property: height; from: 1; to: 2; dur: 1000; delay: 1000"
      >
      </a-box>

      <a-box
        id="thi"
        position="1 1.6 -2"
        scale="0.5 0.5 0.5"
        color="#0000ff"
        animation="property: height; from: 1; to: 2; dur: 1000; delay: 2000"
      >
      </a-box>
    </a-scene>
  </body>
</html>