How to stop initial animation from running after hover state animation is done?

Question

Any input would be great as I'm just starting to deal with css3 keyframe animations and transitions. I made a grid and assigned these grid items using grid-template-areas.

.admin-grid {
  background: url(../media/rocks.jpg) no-repeat center center fixed;
  background-size: cover;
  display: grid;
  height: 100vh;
  background: linear_gradient(black,white);

  grid-template-areas: "a a a"
                       "b c d"
                       "e e e";
}

.grid-item {
  margin: 1rem;
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 5rem;
  color: white;
  box-shadow: -3px 5px #a52700;
  background: linear-gradient(45deg,rgb(48, 87, 189),black,rgb(180, 59, 59));
  animation: load-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
}

.grid-item:hover {

  animation: change_gradient 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) ;
}

And here would be my keyframes.

@keyframes load-in {
  0% {

    position: relative;
    opacity: 0;
    padding: 0.5rem;
    transform: scale(1);

  }

  50% {
    transform: scale(1.1);
  }

  100% {
    position: relative;
    opacity: 1;
    transform: scale(1);
    padding: 1rem;
  }

}


@keyframes change_gradient {
  to {
    /*not yet finished*/
  }
}

Every time I hove over any of my grid items and then remove the cursor from the grid item the load-in animation starts again. I only intend for this animation to happen once on page load. I can't figure out how to make that happen.

In a nutshell: How do I run load-in animation only on page load and not when hover state turns off?

Answer 1

I would move the load-in animation property to it's own class called .load-in and then add that class to each of the grid items.

That might look something like this:

HTML

<div class="grid">
  <div class="grid-item load-in"></div>
  <div class="grid-item load-in"></div>
  <div class="grid-item load-in"></div>
  <div class="grid-item load-in"></div>
  <div class="grid-item load-in"></div>
  <div class="grid-item load-in"></div>
</div>

CSS

.load-in {
  animation: load-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
}

NOTE: Remember to remove the load-in animation property from the .grid-item class.

JS

Next you can add some JavaScript right at the bottom of your page to be executed once the page has loaded. This JavaScript will wait 0.5s until the load-in animation has played and then remove the load-in class from the grid items so that animation doesn't play again.

setTimeout(() => {
  document.querySelectorAll('.load-in').forEach(gridItem => {
    gridItem.classList.remove('load-in')
  })
}, 500)

Answer 2

Whilst doing more experiments on this I found out the following:

Using transition instead of animation will actually hold the state of the final frame in place until the mouse leaves the element and then it will actually transition back to its original state. This is the behavior that I needed.

It seems to be that transition was actually a better and simpler use for this behavior.