JS onclick div disappears until an animation is played
<p>I have an <code>object1</code> and <code>object2</code>.</p>

<p><code>object1</code> has an animation with <code>delay: 0s</code></p>

<p><code>object2</code> has an animation with <code>delay: 0.5s</code></p>

<p>When you click on <strong>1.</strong>, both objects properly assign <code>.animation</code>,but <code>object2</code> after 0.5s, whitch is what I want, everything goes fine.</p>

<p>But here is the problem, when you click on <strong>2.</strong>, objects assign <code>.animation-back</code>, <code>object1</code> does his thing properly, BUT<code>object2</code> disappears for that 0.5s and after that he does an animation.</p>

<p>I probably know, that this is because also removing class <code>.animation</code>, and it's waiting for "play" <code>.animation-back</code>, but when I delete <code>.removeClass('animation-back')</code>, etc..., it will jump into some kind of loop or how can I call it, you can try it yourself.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(".text1").click(function(){
  $(".object1").addClass('animation').removeClass('animation-back');
  $(".object2").addClass('animation').removeClass('animation-back');
});
$(".text2").click(function(){
  $(".object1").addClass('animation-back').removeClass('animation');
  $(".object2").addClass('animation-back').removeClass('animation');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>a{
  font-size:150%;
}
.text1{
  cursor:pointer;
  margin-left:42px;
  font-size:150%;
}
.text2{
  cursor:pointer;
  margin-left:42px;
  font-size:150%;
}
.object1{
  width: 100px;
  height: 100px;
  background: red;
  margin:2em;
  margin-left: 150px;
  position: relative;
  opacity: 0;
}
.object1.animation{
  animation: animation1 0.7s ease-in-out 0s 1 forwards;
}
.object1.animation-back{
  animation: animation2 0.7s ease-in-out 0s 1 forwards;
}
.object2{
  width: 100px;
  height: 100px;
  background: red;
  margin:2em;
  margin-left: 150px;
  position: relative;
  opacity: 0;
}
.object2.animation{
  animation: animation1 0.7s ease-in-out 0.5s 1 forwards;
}
.object2.animation-back{
  animation: animation2 0.7s ease-in-out 0.5s 1 forwards;
}

@keyframes animation1 {
  from { margin-left: 150px; opacity: 0; }
  to { margin-left: 0px; opacity: 1; }
}
@keyframes animation2 {
  from { margin-left: 0px; opacity: 1; }
  to { margin-left: 150px; opacity: 0; }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="text1"&gt;&lt;a&gt;1.&lt;/a&gt;&lt;/div&gt;
&lt;div class="text2"&gt;&lt;a&gt;2.&lt;/a&gt;&lt;/div&gt;
&lt;div class="object1"&gt;&lt;/div&gt;
&lt;div class="object2"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Thanks for advices, have a nice day!</p>