jqueryを使用しないアニメーション要素animate（）

Question

要素をあるオフセット位置から別の位置にアニメーションで移動する必要があります。 そのために私は今、私はjquery animate()機能せずにアニメーションをしたい絶対にfine.But取り組んでいる

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

を使用していました。

ご協力いただければ幸いです。

Answer 1

CSS3アニメーションを試してみてください。あなたはCSS3のキーフレームを使用することができます移動

Answer 2

私はこれがあなたを助けることを望みます。 CSS3トランジションにしようとしました

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