<div>
  <div class="box box1">none</div>
  <div class="box box2">forwards</div>
  <div class="box box3">backwards</div>
  <div class="box box4">both</div>
</div>

.box {
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin: 5px;
  background-color: black;
  transform: translate(0, 0);
  animation: 2s linear 1s;
  color: #fff;
  text-align: center;
  font-size: 12px;
}
div:hover .box {
   animation-name: move;
}
.box1 {
  animation-fill-mode: none;
}
.box2 {
  animation-fill-mode: forwards;
}
.box3 { 
  animation-fill-mode: backwards;
}
.box4 { 
  animation-fill-mode: both;
}
@keyframes move {
    from { transform: translate(100px, 0); }
    to { transform: translate(400px, 0); }
}