[英]animate element without using jquery animate()
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 . 它绝对可以正常工作。但是现在我想要没有
jquery animate()
函数的jquery animate()
。
Any help would be appreciated. 任何帮助,将不胜感激。
Try CSS3 animations. 尝试CSS3动画。 for moving you can use keyframes in CSS3
要移动,可以在CSS3中使用关键帧
I hope this can help you. 希望对您有所帮助。
HTML HTML
<div id="movingObj"></div>
CSS3 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;}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.