html - CSS Transition : How can I make a div move, 暂停，然后用 1 transition 反转方向？

Question

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

transition: left 1s linear .5s

但我如何才能仅使用 1 个转换，使 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")