Как задать направление анимации?

Question

[runapa]

Вопрос такой
Есть код который зачёркивает текст при наведении, и отчеркивает если мышку убрать.

.menu li a:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #fff;
  top: 47%;
  animation: out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}

.menu li:hover a:before {
  animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}

Проблема в том, что анимация идёт в одну сторону - слева на право. А надо, чтобы подчёркивание было слева на право, а отчёркивание справа налево.