悬停状态动画完成后如何从运行停止初始动画？

Question

任何输入都很好，因为我刚刚开始处理 css3 关键帧动画和过渡。我制作了一个网格并使用 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) ;
}

这是我的关键帧。


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


}

每次我将鼠标悬停在我的任何网格项上，然后将光标从网格项上移开时，加载动画再次开始。我只打算让这个动画在页面加载时发生一次。我不知道该怎么做。

简而言之：如何运行仅在页面加载时加载动画，而不是在悬停状态关闭时加载动画？

Answer 1

我会将 load-in 动画属性移动到它自己的 class，称为 .load-in，然后将 class 添加到每个网格项目。

可能看起来像这样：

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

注意：记得从 .grid-item class.

中删除 load-in 动画属性

JS

接下来，您可以在页面底部添加一些 JavaScript，以便在页面加载后执行。此 JavaScript 将等待 0.5 秒，直到 load-in 动画播放完毕，然后 从网格项目中删除 load-in class 以便动画不再播放。

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

Answer 2

在对此进行更多实验的同时，我发现了以下内容：

使用过渡而不是动画实际上会将最后一帧的状态保持到位，直到鼠标离开元素，然后它实际上会过渡回其原始状态。这是我需要的行为。

似乎过渡实际上是对这种行为更好更简单的使用。

悬停状态动画完成后如何从运行停止初始动画？

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

html

css

css-animations

HTML

CSS

JS

悬停状态动画完成后如何从 运行 停止初始动画？

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

html

css

css-animations

HTML

CSS

JS

悬停状态动画完成后如何从运行停止初始动画？