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()功能的动画。

任何帮助都将不胜感激。

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;}
}

不使用jquery animate（）的animate元素

2 个答案: