本文介绍一种基于 localstorage 的可靠方案，确保着陆页的 css 动画在用户每次访问时最多执行一次，并严格限制为每 60 分钟最多播放一回，避免重复干扰，同时兼容页面刷新、跳转与浏览器重启。
本文介绍一种基于 localstorage 的可靠方案，确保着陆页的 css 动画在用户每次访问时最多执行一次，并严格限制为每 60 分钟最多播放一回，避免重复干扰，同时兼容页面刷新、跳转与浏览器重启。
实现“每小时仅运行一次 CSS 动画”的核心难点在于：浏览器中 JavaScript 的 setInterval 不具备跨会话持久性——一旦用户刷新页面、关闭标签页或退出浏览器，定时器即被销毁，无法继续计时。因此，单纯依赖 setInterval(runAnimation, 3600000) 是无效的。
真正可行的方案是：以时间戳为依据，结合 localStorage 持久化记录上一次动画触发时刻，并在每次页面加载时进行时效校验。只有当距上次动画已满 1 小时（3600000 毫秒），才允许执行新动画；否则静默跳过。
以下是经过优化、可直接投入生产的完整实现：
function runAnimation() {
const lastAnimatedAt = localStorage.getItem('lastAnimatedAt');
const now = new Date();
// 校验是否满足「距上次动画 ≥ 1 小时」
if (lastAnimatedAt) {
const lastTime = new Date(lastAnimatedAt);
if (now - lastTime < 3600000) return; // 不足 1 小时，跳过
}
// 获取目标元素（注意：选择器需与实际 HTML 匹配）
const textElement = document.querySelector('.text');
const mainElement = document.querySelector('main');
if (!textElement || !mainElement) return; // 防止 DOM 未就绪
// 触发动画：添加动画类
textElement.classList.add('text-animation');
mainElement.classList.add('herolanding-animation');
// 动画结束后自动清理类（使用 { once: true } 避免重复监听）
textElement.addEventListener('animationend', () => {
textElement.classList.remove('text-animation');
}, { once: true });
mainElement.addEventListener('animationend', () => {
mainElement.classList.remove('herolanding-animation');
}, { once: true });
// ✅ 关键：立即更新 localStorage 时间戳（非动画结束时！）
// 否则若用户在动画中途离开，下次仍会误判为“未播放”
localStorage.setItem('lastAnimatedAt', now.toISOString());
}
// 页面加载完成后立即执行校验与动画（推荐用 DOMContentLoaded）
document.addEventListener('DOMContentLoaded', () => {
runAnimation();
});对应的 CSS 需做两项关键调整：
立即学习“前端免费学习笔记（深入）”；
- 移除默认动画声明（如 .text { animation: herot 1s; }），改用动态添加的 class 控制，否则动画会在无条件加载时自动播放；
- 确保动画类定义为单次执行且无延迟：
.text-animation {
animation: herot 1s forwards;
animation-iteration-count: 1;
}
.herolanding-animation {
animation: herolanding 1.1s forwards;
animation-iteration-count: 1;
}
/* 原 keyframes 保持不变 */
@keyframes herot {
0% { font-size: 15rem; }
100% { font-size: 0; }
}
@keyframes herolanding {
0% { opacity: 0; }
100% { opacity: 1; }
}⚠️ 重要注意事项：
- 不要在 animationend 回调中写 localStorage.setItem：动画可能因样式变更、DOM 移除或用户切页而中断，导致时间戳未更新，进而锁死后续动画。
- 避免 setInterval 主动轮询：本方案无需 setInterval，它仅在页面加载时做一次判断，轻量且精准；若额外加定时器反而增加冗余逻辑和内存占用。
- 兼容性友好：localStorage 和 animationend 在所有现代浏览器（Chrome 4+, Firefox 5+, Safari 6+, Edge 12+）中均稳定支持。
- 用户隐私考虑：该方案完全在客户端运行，不涉及任何网络请求或第三方服务，符合 GDPR / CCPA 等合规要求。
✅ 总结：通过将「最后动画时间」持久化至 localStorage，并在每次页面初始化时做毫秒级时间差比对，我们实现了真正鲁棒、无状态、跨会话的动画节流策略。它既解决了原始代码中 setInterval 失效的问题，又规避了服务端依赖，是 Landing Page 动画体验优化的专业实践。
