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

【问题标题】：How to stop initial animation from running after hover state animation is done?悬停状态动画完成后如何停止运行初始动画？
【发布时间】：2022-10-06 10:09:33
【问题描述】：

任何输入都会很棒，因为我刚刚开始处理 css3 keyframe 动画和过渡。我制作了一个网格并使用网格模板区域分配了这些网格项目。

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

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

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

标签： html css css-animations

【解决方案1】：

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

这可能看起来像这样：

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 类中删除load-in 动画属性。

JS

接下来，您可以在页面底部添加一些 JavaScript，以便在页面加载后执行。此 JavaScript 将等待 0.5 秒，直到 load-in 动画播放完毕，然后消除load-in 来自网格项目的类，这样动画就不会再次播放。

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

【讨论】：

哇，我知道我可以使用 Javascript 来删除/添加类。不知何故，它只是没有发生。感谢您的宝贵时间，并感谢您的回复。这绝对让我继续前进。一个问题。有没有一种方法可以仅在 CSS 上实现？有没有一种方法可以仅使用 css 达到相同的效果？如果可能的话，我想只用 css 来实现它，但不知道如何去做。
stackoverflow.com/questions/8482820/… 还发现这个提到动画迭代计数保存在动画中，并在 :hover 状态开始时重置。这可以解释我正在经历的行为。正如@cam 所提到的，解决方案是通过 javascript 添加/删除类
@Owlet 我看到您进行了垃圾邮件/故意破坏建议的编辑。似乎这是在尝试推广您自己的答案。无论您的意图如何，这样的编辑都是完全不可接受的，并且构成了使该网站恶化的积极尝试，这对许多人来说是一种宝贵的资源。

【解决方案2】：

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

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

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

【讨论】：