We can add animations to our entities using A-Frame’s built-in animation component.

Animations are essentially programmed changes in an entity’s values. The changes can be based on time intervals or on interactions.

Suppose we have a box in our scene and we want it to hover up and down to add some motion. Check out the animation component:

<a-box 
  color="red" 
  position="2 2 -5" 
  rotation="0 45 45" 
  animation="property: object3D.position.x;
    to: 3; 
    dir: alternate; 
    dur: 2000; 
    loop: true">
</a-box>

Note that there are five animation properties separated by semicolons. Here, we are telling the animation component to:

• Animate the object position’s x-axis.
• Animate from the original x-position to 3, which is 1 meter to the right.
• Set the dir (direction) to alternate so it goes back and forth.
• Set the dur (duration) to 2000 millisecond on each cycle.
• Set the loop to true to repeat the animation forever.

Check out the animation documentation for more info.