Javascript 如何在CSS3中保持动画之间的状态？

我希望css3动画，特别是当我将其标记为转发时，能够真正改变元素的变换。但事实并非如此

见：

--使用CHROME浏览器--

HTML:

JAVASCRIPT:

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

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

我希望它做的是保持状态，所以如果我点击go down，它会下降，然后如果我点击go right，它会从它当前所在的位置向右移动

---

但它似乎没有做到这一点。我知道css3转换允许这样做，但我特别想要css3动画，因为我需要使用关键帧。我只想100%更改实际元素的样式。有办法做到这一点吗？

您需要jquery来实现这一点

---

谢谢，但我是专门寻找转换/翻译，而不是页边空白。因为我想要这个硬件加速，所以你所寻找的东西实际上似乎可以更好地用于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;
}

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

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

    <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>