如何实现着陆页CSS动画每小时仅运行一次？

问题根源分析 #

你的代码核心问题在于CSS动画默认直接绑定在元素上，而非通过类来控制，导致页面加载时不管JS逻辑如何，动画都会自动执行。另外，JS中记录时间的时机和类的绑定逻辑也需要调整。

修正后的完整代码 #

HTML（无需修改） #

<div class="text">
  <a> Hello </a>
</div>

<main class="text2">
  <a>body</a>
</main>

CSS（调整动画绑定方式，仅在添加类时触发） #

.text {
  width: 100%;
  position: relative;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  color: black;
  text-align: center;
  z-index: 1000;
  /* 移除默认动画，改为通过类触发 */
}

.text-animation {
  animation: herot 1s forwards;
  animation-iteration-count: 1;
}

@keyframes herot {
  0% {
    font-size: 15rem;
  }
  100% {
    font-size: 0px;
  }
}

@keyframes herolanding {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

main {
  opacity: 1; /* 默认设置为显示状态 */
  transition: ease;
  /* 移除默认动画，改为通过类触发 */
}

.herolanding-animation {
  animation-name: herolanding;
  animation-duration: 1.1s;
}

JavaScript（优化判断逻辑与时间记录时机） #

function runAnimation() {
  const lastAnimatedAt = localStorage.getItem('lastAnimatedAt');
  const currentTime = new Date();

  // 检查是否在一小时内已经运行过动画
  if (lastAnimatedAt) {
    const lastAnimationTime = new Date(lastAnimatedAt);
    const timeDifference = currentTime - lastAnimationTime;
    // 小于一小时则直接返回
    if (timeDifference < 3600000) {
      return;
    }
  }

  const textElement = document.querySelector('.text');
  const mainElement = document.querySelector('main');

  // 添加动画类触发动画
  textElement.classList.add('text-animation');
  mainElement.classList.add('herolanding-animation');

  // 动画结束后移除类，避免重复触发
  const handleAnimationEnd = (element) => {
    element.classList.remove(element.classList.contains('text-animation') ? 'text-animation' : 'herolanding-animation');
  };

  textElement.addEventListener('animationend', () => handleAnimationEnd(textElement), { once: true });
  mainElement.addEventListener('animationend', () => handleAnimationEnd(mainElement), { once: true });

  // 动画开始时就记录时间，避免页面提前关闭导致记录失败
  localStorage.setItem('lastAnimatedAt', currentTime.toISOString());
}

// 页面加载时执行检查
window.addEventListener('load', runAnimation);

关键调整说明 #

• CSS动画控制：将原本直接绑定在.text和main上的animation属性，移到单独的text-animation和herolanding-animation类中，只有当JS添加这些类时，动画才会触发。
• 时间记录时机：在动画开始执行时就更新localStorage，而不是等动画结束，避免用户在动画未完成时关闭页面导致时间未被记录。
• 移除不必要的定时器：setInterval无需保留，因为我们只需要在页面加载（刷新/返回）时检查是否满足动画执行条件，而非在页面持续打开时定时触发。
• 初始状态设置：给main设置默认opacity: 1，避免未触发动画时页面元素不可见。

内容的提问来源于stack exchange，提问作者Thor The dog