如何在CSS3中的動畫之間保持狀態？

Question

我希望使用css3動畫，尤其是當我將其標記為“ forward”時，實際上會改變元素的變換。 但事實並非如此。

參見： http : //jsfiddle.net/foreyez/3b3f6oyx/

---使用鉻瀏覽器---

HTML：

<div style='position:fixed;bottom:10px'>
<button onclick='down()'>Go Down</button>
<button onclick='right()'>Go Right</button>
</div>

CSS：

@-webkit-keyframes animdownkf {
    0% {  }
    100% { transform: translateY(100px); }
}

@-webkit-keyframes animrightkf {
    0% {  }
    100% { transform: translateX(100px); }
}

#box {
    width:50px;
    height:50px;
    background:black;
}

button {
    height:100px;
    width:100px;
}
.animdown { 
        -webkit-animation:1s animdownkf forwards;
}

.animright { 
        -webkit-animation:1s animrightkf forwards;
}

JAVASCRIPT：

function down() {
        $('#box').removeClass('animright');
        $('#box').addClass('animdown');
}

function right() {
        $('#box').removeClass('animdown');
        $('#box').addClass('animright');
}

我希望它執行的是持久狀態，因此，如果單擊“下降”，它將下降，然后，如果單擊“下降”，它將從當前所在的位置開始。

但這似乎沒有做到。 我知道css3過渡可以做到這一點，但是我特別想要css3動畫，因為我需要使用關鍵幀。 我只希望100％更改實際元素的樣式。 有沒有辦法做到這一點？

Answer 1

你需要jQuery的...

http://jsfiddle.net/swestphal/9kanuLc5/

    <script type="text/javascript">
$(document).ready(function() {

$('#moveright').click(function() {
    $('#box').animate({
    'marginLeft' : "+=100px" //moves right
    });
});

$('#movedown').click(function() {
    $('#box').animate({
    'marginTop' : "+=100px" //moves down
    });
});


  });
  </script>

  <button id="moveright">Move right</button> <button id="movedown">Move     Down</button><div id="box" style="position:absolute;">x</div>