Анимация в обратном порядке

[aqua.77]

$(document).ready(function(){
   $('div').click(function(){
      $('div').toggleClass('a1').removeClass('a2'); 
   });   
   $('p').click(function(){
      $('div').toggleClass('a2').removeClass('a1'); 
   });   
});

div {
   width: 200px;
   height: 200px;
   background: black;
   position: relative;
}

.a1 {
   animation: vras 3s forwards; 
}

.a2 {
   animation: vras 3s alternate-reverse forwards;
}

@keyframes vras{
   from {
      left: 0;
   }
   33% {
      left: 85%;
   }
   66% {
      left: 0;
   }
   to{
      left: 500px;
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>
<p>123</p>

Здравствуйте. Начал изучать JQuery, не могу понять как сделать анимацию при нажатии по блоку в одну сторону, а при нажатии на абзац выполнить эту же анимацию но в обратном порядке (как переход).

Edited January 9, 2017 by aqua.77

[npofopr]

Вы бы лучше в какой нибудь песочнице примеры делали. Было бы куда больше откликов.