animate element without using jquery animate()

Question

I need to move a element from one offset position to another with animation. for which i was using

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.*/

It is working absolutely fine.But now I want the animation without jquery animate() function .

Any help would be appreciated.

Answer 1

Try CSS3 animations. for moving you can use keyframes in CSS3

Answer 2

I hope this can help you.

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