本文介绍一种可靠方案：利用 localStorage 记录上一次动画触发时间，结合 JavaScript 控制逻辑，确保落地页的 CSS 动画在用户每次访问时最多每小时运行一次，避免频繁重播带来的视觉干扰。
本文介绍一种可靠方案：利用 localStorage 记录上一次动画触发时间，结合 JavaScript 控制逻辑，确保落地页的 CSS 动画在用户每次访问时最多每小时运行一次，避免频繁重播带来的视觉干扰。
在构建现代营销型落地页时，首屏动画（如标题渐显、主视觉淡入）能显著提升视觉吸引力。但若用户反复刷新页面、切换标签页或返回页面，动画就会重复播放，极易造成体验疲劳。单纯依赖 setInterval（如每小时调用一次动画函数）是无效的——它无法跨页面生命周期持久化，一旦刷新或关闭标签，定时器即被销毁。
真正的解决方案在于状态持久化 + 按需触发：使用 localStorage 存储时间戳，并在每次页面加载时进行「时效性校验」，仅当距上次动画已满一小时才执行。以下是优化后的完整实现：
✅ 正确的 JavaScript 控制逻辑
function runAnimation() {
const lastAnimatedAt = localStorage.getItem('lastAnimatedAt');
const now = new Date();
// 校验是否满足「距上次动画 ≥ 1 小时」
if (lastAnimatedAt) {
const lastTime = new Date(lastAnimatedAt);
if (now - lastTime < 3600000) { // 3600000ms = 1 hour
console.log('Animation skipped: less than 1 hour since last run.');
return;
}
}
// 获取并触发动画元素
const textElement = document.querySelector('.text');
const mainElement = document.querySelector('main');
if (!textElement || !mainElement) {
console.warn('Animation elements not found.');
return;
}
// 添加动画类（CSS 中定义 animation-iteration-count: 1）
textElement.classList.add('text-animation');
mainElement.classList.add('herolanding-animation');
// 动画结束后自动清理类名（防样式残留）
const cleanup = () => {
textElement.classList.remove('text-animation');
mainElement.classList.remove('herolanding-animation');
};
textElement.addEventListener('animationend', cleanup, { once: true });
mainElement.addEventListener('animationend', cleanup, { once: true });
// ✅ 关键：动画启动后立即记录当前时间（非结束时！）
// 避免因用户快速离开页面导致时间未写入
localStorage.setItem('lastAnimatedAt', now.toISOString());
}
// 页面加载完成时立即检查并可能执行动画
document.addEventListener('DOMContentLoaded', runAnimation);
// （可选）补充定时器：应对用户长时间停留首页的场景
// 注意：此 setInterval 仅在当前页面会话中有效，不替代 localStorage 校验
setInterval(runAnimation, 3600000);✅ 对应的 CSS 动画声明（精简优化版）
.text {
width: 100%;
position: relative;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
color: black;
text-align: center;
/* 移除默认 animation，由 JS 控制启停 */
}
.text-animation {
animation: herot 1s forwards;
}
.herolanding-animation {
animation: herolanding 1.1s ease-out forwards;
}
@keyframes herot {
0% { font-size: 15rem; opacity: 0; }
100% { font-size: 3rem; opacity: 1; }
}
@keyframes herolanding {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}⚠️ 关键注意事项
- 时间记录时机很重要：务必在 runAnimation() 函数开头就判断，且在添加动画类后立即写入 localStorage（而非等待 animationend），否则用户中途关闭页面会导致下次仍被判定为“未过期”。
- 不要依赖 setInterval 单独工作：它无法跨会话生效，仅作为辅助机制；核心逻辑必须基于 localStorage 时间戳校验。
- 兼容性保障：localStorage 在所有现代浏览器中均支持；若需支持隐私模式（部分浏览器禁用 localStorage），可降级为内存缓存（let lastTimeInMemory），但会丢失跨页面状态。
- HTML 结构需匹配选择器：确保 .text 和 <main> 元素真实存在，建议添加 id 或更明确的 class 提升健壮性。
- 调试建议：开发时可在控制台执行 localStorage.removeItem('lastAnimatedAt') 强制重置，方便测试。
通过该方案，动画真正实现了「用户维度」的时间节流——无论用户从何处进入页面（搜索引擎、书签、微信外链），只要同一浏览器中上次动画已过去一小时，便会优雅触发；否则静默跳过，兼顾表现力与用户体验。
立即学习“前端免费学习笔记（深入）”；
