動畫元素而不使用jQuery animate（）

Question

我需要使用動畫將元素從一個偏移位置移動到另一個偏移位置。 我正在使用的

function getOffset(el) {
    el = el[0].getBoundingClientRect();
    return {
        left: el.left + window.scrollX,
        top: el.top + window.scrollY
    }
}
var _anchorElemPos = getOffset($element)
_animationElement.animate(_targetAnimPos); /*_targetAnimPos is the position where the element has to move.*/

它絕對可以正常工作。但是現在我想要沒有jquery animate()函數的jquery animate() 。

任何幫助，將不勝感激。

Answer 1

嘗試CSS3動畫。 要移動，可以在CSS3中使用關鍵幀

Answer 2

希望對您有所幫助。

HTML

<div id="movingObj"></div>

CSS3

#movingObj{
  background-color:red;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0px;
  -webkit-animation: moving 3s forwards;
  animation: moving 3s forwards;
}

@-webkit-keyframes moving {
  from {left: 0px;}
  to {left: 400px;}
}

@keyframe moving{
  from {left: 0px;}
  to {left: 400px;}
}