<!DOCTYPE html>
<html>
<head>
<title>Animations - 02 - Easings</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="../js/livecode.js"></script>
</head>
<body>
<a-scene background="color:blue">
<a-box
scale="0.5 0.5 0.5"
position="-3 0 -4"
animation="property: position; dur: 5000; easing: linear; to: 3 0 -4; loop: true"
>
</a-box>
<a-box
scale="0.5 0.5 0.5"
position="-3 1 -4"
animation="property: position; dur: 5000; easing: easeInOutQuad; to: 3 1 -4; loop: true"
>
</a-box>
<a-box
scale="0.5 0.5 0.5"
position="-3 2 -4"
animation="property: position; dur: 5000; easing: easeOutQuad; to: 3 2 -4; loop: true"
>
</a-box>
<a-box
scale="0.5 0.5 0.5"
position="-3 3 -4"
animation="property: position; dur: 5000; easing: easeInQuad; to: 3 3 -4; loop: true"
>
</a-box>
</a-scene>
</body>
</html>