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％会损坏动画，sos我需要检测窗口的高度和宽度，从而动态调整边距。

Answer 1

您可以解析当前的整数值，然后根据需要添加它：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

将css更改为具有动画的元素？

1 个答案: