var el = document.getElementById('element');

// 取得起始位置
var first = el.getBoundingClientRect();

// 為元素指定一個樣式，讓元素在終止位置上
el.classList.add( 'totes-at-the-end' );

// 取得終止位置
var last = el.getBoundingClientRect();

// 反轉
var invert = first.top - last.top;

// 播放動畫
var player = el.animate([
  { transform : 'translateY(' + -invert + 'px)' },
  { transform : 'translateY(0)' }
], {
  duration: 300 ,
  easing: 'cubic-bezier(0,0,0.32,1)' ,
});

// 結束後清除動畫
player.addEventListener( 'finish' , tidyUpAnimations);

function tidyUpAnimations() {
  console.log('clean up the animation');
  el.classList.remove( 'totes-at-the-end' );
}