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

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?

CodePudding user response：

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 >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></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)

CodePudding user response：

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.