如何使用普通的JavaScript重新启动CSS动画？

Question

我有一个包含4个图像的flexbox，当悬停在一个动画播放的图像上时，但当我再次悬停时，动画不再播放。

根据我目前所读到的，我不得不使用JavaScript重新启动动画，但我在网络上找到的解决方案对我来说并不起作用。

我是否应该通过ID来确定跨度，并在JS中添加/移除"textAnim“类？当我悬停图片的时候该怎么做？

​

/* Images Section Styling */

.container-3 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
}

.container-3 img {
  max-width: 100%;
  max-height: 100%;
}

.image {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}


/* Image overlay */

.overlay {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0);
  background-color: rgba(107, 105, 105, 0);
  transition: background-color 1s ease;
  transition: color 1s ease;
  overflow: hidden;
}

.image:hover .overlay {
  background-color: rgba(107, 105, 105, 0.5);
  color: rgba(255, 255, 255, 1);
  transition: background-color 1s ease;
}

.textAnim {
  animation: textAnimation 1s;
  animation-play-state: paused;
  position: relative;
  padding-left: 50%;
  top: 50%;
}

.image:hover .textAnim {
  animation-play-state: running;
}

@keyframes textAnimation {
  0% {
    opacity: 0;
    padding-top: 50%;
  }
  100% {
    opacity: 1;
    padding-top: 0%;
  }
}

<section class="images">
  <div class="container-3">
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animaiton">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
  </div>
</section>

​

Answer 1

在这种情况下，您不需要使用JS来重新启动动画。

下面提到的更改足以让动画在您每次悬停在图像上时保持运行。

.image:hover .textAnim {
  animation-play-state: running;
}

如果您保持动画仅在悬停状态下运行，则会达到此效果。

更新后的代码片段如下-

​

/* Images Section Styling */

.container-3 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: relative;
}

.container-3 img {
  max-width: 100%;
  max-height: 100%;
}

.image {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}


/* Image overlay */

.overlay {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0);
  background-color: rgba(107, 105, 105, 0);
  transition: background-color 1s ease;
  transition: color 1s ease;
  overflow: hidden;
}

.image:hover .overlay {
  background-color: rgba(107, 105, 105, 0.5);
  color: rgba(255, 255, 255, 1);
  transition: background-color 1s ease;
}

.image:hover .textAnim {
  animation: textAnimation 1s;
  animation-play-state: paused;
  position: relative;
  padding-left: 50%;
  top: 50%;
}

.image:hover .textAnim {
  animation-play-state: running;
}

@keyframes textAnimation {
  0% {
    opacity: 0;
    padding-top: 50%;
  }
  100% {
    opacity: 1;
    padding-top: 0%;
  }
}

<section class="images">
  <div class="container-3">
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animaiton">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/1000">
      <div class="overlay">
        <span class="textAnim" id="animation">
                            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, enim?
                        </span>
      </div>
    </div>
  </div>
</section>

​

Answer 2

您可以通过在要设置动画的元素中添加和删除textAnim类来启动和停止CSS动画。这可以通过javascript使用classList的add和remove方法来完成。

例如，如果元素的名称是"animation1"，您可以添加这些事件侦听器，以便在悬停期间添加textAnim类，但在不悬停时删除该类：

let a1 = document.getElementById("animation1");

a1.addEventListener("mouseover", function()
{
    a1.classList.add("textAnim");
});

a1.addEventListener("mouseout", function()
{
    a1.classList.remove("textAnim");
});

注意：我发现您在同一个html文档中多次使用相同的ID (id="animation")。从技术上讲，这是无效的HTML。您应该唯一地命名每个id，或者创建一个名为animation的附加类。是的，元素可以属于多个类(而不是像类一样使用id )。

Answer 3

 but when i hover again the animation is no longer playing

你想要一个无限的动画，你可以解决这个问题

你试过了吗

animation-iteration-count: number|infinite|initial|inherit;

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation

对不起，我想发表评论，但我没有那么多的代表权