title: How to delete the element (loading page + css animation 100%)?
body: <p>How can I tell p js and jQuery
  if @keyframes 100% ???</p>
  <p>If @keyframes for the element == 100%, do something specific</p>
  <p>My problem is I have an element on the page ,, I want to delete the element when the page loads, and if the animation is done in CSS</p>
  <p>Meaning I do not want him to delete the element when the page loads. I just want to delete the element when the page is complete + animation 100%</p>
  <p>The element is span (load-span)</p>
  <p>HTML :</p>
  <pre><code> &lt;a href=&quot;#&quot;&gt;
   &lt;div class=&quot;back-move&quot;&gt;
       &lt;span class=&quot;load-span&quot;&gt;&lt;/span&gt;
       &lt;div class=&quot;play-move&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;p&gt;GG img&lt;/p&gt;
  </code></pre>
   
  <p>CSS:</p>
  <pre><code>    .load-span {
      position: absolute;
      background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
      width:40px;
      height: 100%;
      top: -50%;
      left: 100%;
      animation: load-span 1s;
      animation-iteration-count: infinite;
      transform: translate(15px, 0px) skewX(35deg);
  }
  
  @keyframes load-span {
      100%{ top: 100%;left: -100%;}
  }
  </code></pre>
  <p>Also I have tried :</p>
  <pre><code>$(window).on(&quot;load&quot;, function () {
   $('.load-span').on(&quot;animationend&quot;, function(){
      $(this).remove();
  });
  })
  </code></pre>
  <p>But it didn't work ):</p>