javascript - 将CSS更改为具有动画的元素？

Question

我为图像设置了一个 css 动画，如下所示:

<style>
 #egg{

  height:50px;
  z-index: 2;

    margin-left:950px;
    margin-top: 450px;
    position:absolute;
    animation-duration: 6.4s;
    animation-name: slide;
     animation-iteration-count: infinite;
}
@keyframes slide{
    0% {
    margin-left: 910px;
  }

  49.99% {
        -moz-transform: scaleX(1);
        -o-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        filter: FlipH;
        -ms-filter: "FlipH";
  }
  50%{
    margin-left: 1250px;

        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
  }
  100%{
    margin-left:910px;
    -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
  }
}
</style>

通常我使用下面的代码来更改元素的 css:

$(element).css('margin-left','+=1000px');

但这对带有动画的元素不再有效。所以我想知道如何将 css 边距更改为附加了动画的元素？

我这样做的原因是当单击按钮时，元素应该显示在屏幕中间以开始动画。但是使用 margin:x% 会损坏动画，所以我需要检测窗口的高度和宽度，从而动态调整边距。

Answer 1

你可以解析当前的整数值，然后添加你想要的:

$(document).ready(function() {
  var element = $("#change-margin");
  setTimeout(function() {
    var current = parseInt(element.css('margin-left'));
    element.css('margin-left', 100 + current);
  }, 1000);
});

#change-margin {
  margin-left: 20px;
  width: 50px;
  height: 50px;
  background-color: #fea;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="change-margin"></div>