动画元素而不使用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;}
}