css - 从元素的当前位置在右侧 10px 处执行动画

Question

我是动画这个主题的新手。基本上我想在你的 hover 属性中移动一个 div .son 。我希望这个动画从它的 current position 开始，在 right 的 10px 处。我通常能够通过定义“左”的初始位置和“左”的结尾来执行此动画，但在这种情况下，我希望它采用它所在的初始位置，从而向右移动 10px。

<div class="father">
  <div class="son">
  </div>
</div>

.father{
  position:relative;
  width:300px;
  height:300px;
  border:1px solid red;
}

.son{
  position:absolute;
  width:100px;
  height:100px;
  border:1px solid red;

}

.son:hover {
    -webkit-transition: all 0.5s ease;
    -webkit-animation: fadein_1 0.2s ease-in;
}

@-webkit-keyframes fadein_1 {
    from { opacity: 1;left:auto;z-index:2;  }
    to { opacity: 0; left:10px;z-index:3; }
}

这是我的代码:

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

谢谢

Answer 1

如果你可以使用 jQuery，检查这个: https://jsfiddle.net/95agyjuo/

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