CSS过渡：如何通过1次转换使div移动，暂停，然后反转方向？

Question

我可以使用简单的过渡来移动div的左值

transition: left 1s linear .5s

但是我怎么能只使用一次转换，让div向左移动，暂停，然后再移回？

我一直无法找到如何做到这一点。这可能吗？

Answer 1

似乎动画是要走的路：

http://codepen.io/graygilmore/pen/8d8b41ed278d061764b3df531223a0e1

HTML：

<div class="box"></div>

CSS：

.box {
  width: 200px;
  height: 200px;
  background: black;
  position: relative;
}

.gogogo {
  animation: tumble 4s linear;
}

@keyframes tumble {
  0% {
    top: 0;
    left: 0;
    -webkit-transform:rotate(0deg);
  }

  30%,
  60% {
    top: 300px;
    left: 300px;
    -webkit-transform:rotate(45deg);
  }

  100% {
    top: 0;
    left: 0;
    -webkit-transform:rotate(0deg);
  }
}

CoffeeScript的：

$(".box").on "click", ->
  $(".box").toggleClass("gogogo")

Answer 2

我不相信你能做到这一点。如果您查看this link，您可以看到存在许多不同的转换方式，但它们都需要两种不同的状态才能进行转换。我想你需要使用其中两个。