title: When using @keyframes to fade-out with opacity, how do I repeat the animation with the event?
body: <p>I am making a label pop up for the user, if the user tries to drag and drop an element that has already been dragged. </p>
  
  <p>Problem is, that the animations only happens <em>once</em>, and at the end of the animation, it will have an opacity of 0 forever. </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@keyframes smooth {
  0% { opacity: 1;}
  100% { opacity: 0;}
  }
  
  .o_tip{
      position: absolute;
      z-index: 999;
  
      display: none;
      opacity: 0;
  
      -webkit-animation: smooth 2s ease-in;
      -moz-animation: smooth 2s ease-in;
      -o-animation: smooth 2s ease-in;
      -ms-animation: smooth 2s ease-in;
      animation: smooth 2s ease-in;
  }
  </code></pre>
  
  <p>To illustrate my problem, if I 'end' the animation on <code>opacity: 0.2</code> instead of <code>opacity: 0</code>:</p>
  
  <pre><code>@keyframes smooth {
  0% { opacity: 1;}
  100% { opacity: 0.2;}
  }
  </code></pre>
  
  <p>... then the label <em>will</em> reappear for each event - but it will not fade out again, which I want to do. </p>