SOURCE

var box = document.querySelector('.box'),
    addBtn = document.querySelector('.add'),
    btn1 = document.querySelector('.btn1'),
    btn2 = document.querySelector('.btn2'),
    boxW = 200, boxH = 100, itemW = 10, itemH = 10, itemAnime = null;

box.style.width = boxW + 'px';
box.style.height = boxH + 'px';

function add (e) {
  var  d = document.createElement('div');
  d.setAttribute('class', 'item');
  var cssTxt = `width:${itemW}px; height:${itemH}px;`
  console.log(cssTxt);
  d.style.cssText = cssTxt;
  box.appendChild(d);
  anime({
    targets: d,
    translateX: random(boxW - itemW),
    translateY: random(boxH - itemH),
    duration: 1500,
  })
}
function random(end) {
  return Math.random() * end
}

addBtn.addEventListener('click', function(e) {
  add();
}, false);
btn1.addEventListener('click', function(e) {
  itemAnime = anime({
    targets: '.box .item',
    translateX: 10,
    translateY: 10,
    duration: 1500,
  })
  itemAnime.play()
}, false);
btn2.addEventListener('click', function(e) {
  itemAnime.reverse()
}, false);

<div class="box"></div>
<div class="btn-bar">
  <div class="btn add">add</div>
  <div class="btn btn1">btn1</div>
  <div class="btn btn2">btn2</div>
</div>

.box{
  width: 500px;
  height: 200px;
  background: #fff;
  transform: translateX(0);
  position:relative;
}
.btn-bar{
  width: 100px;
  background: #000;
  display: flex;
  flex-direction: row;
  border-radius:4px;
  margin-top: 10px;
  cursor: pointer;
}
.btn-bar .btn{
  flex:1;
  color:#fff;
  text-align:center;
}
.btn-bar .btn:first-child{
  border-right:1px solid #fff;
}
.item{
  position: absolute;
  top: 0;
  left: 0;
  background: #f40;
  border: 1px solid #fff;
}