<!DOCTYPE html>
<style>
.box {
  height: 100px;
  width: 100px;
  background-color: blue;
}

#box {
  animation-name: anim;
  animation-duration: 1s;
  animation-delay: -0.5s;
  animation-play-state: paused;
  animation-timing-function: linear;
}

@keyframes anim {
  from { transform: rotate(0deg) translate(-100px, 0); }
  to   { transform: rotate(180deg) translate(300px, 0); }
}
</style>
<div class="box" id="box"></div>