title: CSS animation: fire css animation on class active
body: <p>is it possible to fire up css animation every time class is active?
  preview: i have image slider, every time image changes, active class changes too, to current image.</p>
  <p>i trying to fire css animation every time that image changed</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.article.active {
    height: 75px;
    margin-top: -109px;
    margin-left: -70px;
    color: white;
    width: 100%;
    opacity: 0.8;
    z-index: 105;
  }
  
  .article-num {
    background: red;
    float: right;
    margin-top: 20px;
    width: 0;
    height: 32px;
    padding: 0;
    font-size: 27px;
    opacity: 0;
    animation-name: movingnum;
    animation-duration: 4.7s;
    animation-delay: 200ms;
    animation-fill-mode: forwards;
  }
  
  .article-paragraph {
    top: 24px;
    background: black;
    width: 0;
    height: 23px;
    padding: 0;
    float: right;
    z-index: 30;
    text-align: right;
    opacity: 0;
    animation-name: movingpar;
    animation-delay: 400ms;
    animation-duration: 4.2s;
    animation-fill-mode: forwards;
  }
  
  /* keyframes : */
  @keyframes movingnum {
    0%,
    100% {
      width: 0px;
    }
    10%,
    90% {
      width: 31px;
      padding: 6.7px;
      opacity: 1;
    }
  }
  
  @keyframes movingpar {
    0%,
    100% {
      width: 0px;
      opacity: 0;
    }
    10%,
    90% {
      width: 300px;
      padding: 11px;
      opacity: 1;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="swiper-slide" href="views/fourthArticle.html"&gt;
    &lt;video id="ctvideo" class="swiper-slide" loop autoplay src="video/staben2miv101217_700.mp4" value="0" muted&gt;&lt;/video&gt;
    &lt;div class="article active"&gt;
      &lt;span class="article-num"&gt;04&lt;/span&gt;
      &lt;p class="article-paragraph"&gt;&lt;strong&gt;text text text&lt;/strong&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In the above example, animation is played just one time. Can I somehow replay animations when some specific requirements are met; like when a parent or sibling elements have <code>.play</code> class.</p>