Как реализовать анимацию CSS

$('button').on('click',function(){ //При нажатии на кнопку.. 
  var buttonPos = $(this).offset(); //Определяем позицию кнопки.. 
  var basketPos = $('.basket').offset(); //Определяем позицию корзины 
  var cardImg = $('.card .image img').attr('src'); 
   
  $('.card').append('<div class="addbasket-effect" style="position:absolute;z-index:999;">'+ 
                    '<img src="'+cardImg+'" width="100px">'+ 
                    '</div>'); // Создаём блок с эффектом 
                     
  $('.addbasket-effect').css({ // Устанавливаем ему позицию кнопки 
    'top': buttonPos.top, 
    'left': buttonPos.left 
  }).animate({ // А потом анимацию, с позицией корзины 
    'top': basketPos.top, 
    'left': basketPos.left 
  },1000,'linear',function(){ 
    $('.addbasket-effect').remove(); // После окончания анимации - удаляем блок 
  }); 
});

.top { 
  width: 100%; 
  height: 60px; 
  background: #888; 
  text-align: right; 
} 
.top .basket { 
  display: inline-block; 
  height: 40px; 
  line-height: 40px; 
  margin: 10px; 
  padding: 0 10px; 
  background: #555; 
  color: #fff; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="top"> 
  <div class="basket">Корзина</div> 
</div> 
 
<div class="card"> 
  <div class="image"> 
    <img src="https://via.placeholder.com/250x150"> 
  </div> 
  <button>Добавить в корзину</button> 
</div>

var $cart = $('#cart'); 
$('#tocart').on('click', function(){ 
  var $product = $('#product'); 
  $product 
    .clone() 
    .addClass('clone') 
    .appendTo('body') 
    .css({ 
      top: $product.offset().top, 
      left: $product.offset().left 
    }) 
    .animate({ 
      top: $cart.offset().top, 
      left: $cart.offset().left, 
      opacity: 0 
    }, 1000, function(){ 
      $(this).remove(); 
    }); 
});

#cart { 
  position: absolute; 
  top: 20px; 
  right: 20px; 
  width: 20px; 
  height: 20px; 
  background: black; 
} 
 
#product img { 
  width: 200px; 
} 
 
#product.clone { 
  position: absolute; 
  margin: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="cart"></div> 
<button id="tocart">В корзину</button> 
<div id="product"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"></div>