How to restart a CSS animation using vanilla JavaScript?

Question

I have a flexbox with 4 images, when hovered on one of the images an animation plays, but when i hover again the animation is no longer playing.

From what i've read so far i have to restart the animation using JavaScript, but the solutions i found on the web are not working for me.

Should i target span by ID and add/remove "textAnim" class in JS? How to do it when i hover the image?

/* 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

You can start and stop your CSS animation by adding and removing the textAnim class to and from the element you're wanting to animate. This can be accomplished using the add and remove methods of classList via javascript.

For example, if the element's name is "animation1", you could add these event listeners so that the textAnim class is added during hovering but removed when not hovering:

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

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

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

Note: I see that you are using the same ID (id="animation") multiple times in the same html document. That's technically invalid HTML. You should either name each id uniquely, or create an additional class called animation. Yes, elements can belong to multiple classes (instead of using an id like a class).

Answer 2

You don't need to use JS to restart the animation in this case.

Below mentioned change is enough to keep the animation going every time you hover over the image.

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

If you keep the animation running only on hover, you'll achieve the result.

Updated snippet is as follows -

/* 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 3

 but when i hover again the animation is no longer playing

you want a infinite animation you can solve that

did you try

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

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

sorry meant to comment but didnt have that much rep