Html CSS转换：如何使div移动、暂停，然后用1转换反转方向？

我可以使用一个简单的转换来移动div的左值

transition: left 1s linear .5s

但是，我怎样才能只用1次转换，使一个div向左移动，暂停，然后再向后移动呢

---

我一直不知道该怎么做。这有可能吗？

看来动画才是最好的选择：

HTML:

咖啡脚本：

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

---

我不相信你能做到。如果您查看，您会发现存在许多不同的转换方式，但它们都需要两种不同的状态来进行转换。我想你需要用两个

是的，这就是路。。。尽管top应该保持在0，以满足他的要求。

.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);
  }
}

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