jquery - CSS 动画 : fire css animation on class active

Question

是否可以在每次上课时启动 css 动画？ 预览:我有图像 slider ，每次图像更改时，事件类也会更改为当前图像。

我试图在每次图像改变时触发 css 动画

.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;
  }
}

<a class="swiper-slide" href="views/fourthArticle.html">
  <video id="ctvideo" class="swiper-slide" loop autoplay src="video/staben2miv101217_700.mp4" value="0" muted></video>
  <div class="article active">
    <span class="article-num">04</span>
    <p class="article-paragraph"><strong>text text text</strong></p>
  </div>
</a>

在上面的例子中，动画只播放了一次。当满足某些特定要求时，我可以以某种方式重播动画吗？就像当父元素或兄弟元素具有 .play 类时。

Answer 1

仅向活跃的 parent 添加动画。

.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;
 
}
.article.active  .article-num { 
  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;

}
.article.active  .article-paragraph{
  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;
  }
}

<a class="swiper-slide" href="views/fourthArticle.html">
  <video id="ctvideo" class="swiper-slide" loop autoplay src="video/staben2miv101217_700.mp4" value="0" muted></video>
  <div class="article active">
    <span class="article-num">04</span>
    <p class="article-paragraph"><strong>text text text</strong></p>
  </div>
</a>