アニメーションを持つ要素に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のマージンを変更する方法をアニメーションが添付されているのだろうか？

ボタンをクリックしたときに要素が画面の中央に表示され、アニメーションが開始されるはずです。マージンを使用すると、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>