Question

我是动画的新手。基本上，我想在您的.son属性中移动一个div hover。我希望该动画从current position上10px的{{1}}开始。通常，我可以通过为“ left”定义一个初始位置和为“ left”定义一个结束位置来执行此动画，但是在这种情况下，我希望它采用它所在的初始位置，从而向右移动10px。 >

right

这是我的代码：

https://jsfiddle.net/ze9vdLa3/it？

谢谢

Answer 1

如果可以使用jQuery，请检查以下内容： https://jsfiddle.net/95agyjuo/

jQuery('.son').mouseover(function(){
  jQuery(this).animate({ 
    left : "+=10"
  })
})

Answer 2

您可以使用CSS translateX()函数来完成所需的动画。正如@Joe Koker所说，这比给left属性设置动画更有效。

@-webkit-keyframes fadein_1 {
    from { 
        opacity: 1;
        transform: translateX(0px); //start from initial position
        z-index:2;
    }
    to { 
        opacity: 0;
        transform: translateX(10px); //move 10px
        z-index:3;
    }
}

Answer 3

您的问题有点含糊，但是如果您要在右侧添加元素动画，这很容易。你差点就吃了。

一些事情：

无法从auto开始设置动画，因此我不得不更改left:auto-> left: 0;（from { opacity: 1;left:0;z-index:2; }）
-webkit-不是必需的
也无法为z-index设置动画

这是一个工作的小提琴：https://jsfiddle.net/oqdn6xLg/1/

尽管对于这种用例，我还是建议使用transition属性，因为它更简单。在这里查看区别：https://jsfiddle.net/L04xhgpr/

请注意，transform: translateX()的效果更好，就像其他人已经说过的：）

从右边10px的元素的当前位置开始执行动画

3 个答案: