Как сделать, чтобы 2 элемента столкнулись?

Если это вот прям конечный вариант и нужно только остановить их без дополнительных анимаций и последующих действий: Я бы тупо вручную подобрал кол-во итераций, после которого нужно вызвать clearInterval

var i = 0;
var interval = setInterval(function() {
  // ляляля
  if( ++i > 51 ) clearInterval(interval);
}, 20);

P.s. зачем вызывать функцию 250 раз в секунду, если браузер всё равно обновляет картинку 60 раз в секунду?
__________________

А если нужно реализовать нормальную анимацию, сделал бы так:

var i = 0; // тормоз для тестов;

$('.box').clone().appendTo('.scene');
var $th = $('.box');
var box1 = $th.get(0);
var box2 = $th.get(1);
$(box1).css({
  left: box1.offsetLeft + (-1000) + 'px'
});
$(box2).css({
  left: box2.offsetLeft + (1000) + 'px',
  transform: 'rotateX(-100deg) rotateY(270deg)'
});

var card1 = box1.querySelector(".cuboid-17 .face.rt");
var card2 = box2.querySelector(".cuboid-17 .face.rt");

requestAnimationFrame(move);
function move() {
  $(box1).css('left', box1.offsetLeft + (10) + 'px');
  $(box2).css('left', box2.offsetLeft + (-10) + 'px');

  console.log(card1.getBoundingClientRect().right, card2.getBoundingClientRect().left);

  if (i++ > 100 || card2.getBoundingClientRect().left - card1.getBoundingClientRect().right < 1) {
    // Вызвать анимацию столкновения ();
    return;
  }
  requestAnimationFrame(move);
}
__________

Оказалось легче взять крайние элементы и тупо сравнивать их координаты, чем вникать в миллион трансформаций и доставать оттуда реальную ширину анимируемого объекта.

Проверка не на равенство, потому что там длинные дроби, они никогда не будут равны. Нужно только, чтобы были достаточно близки.