CSS页面加载淡入效果异常：非首页重复触发淡入求解决方案

方法一：用本地存储标记已触发动画 #

把CSS中的动画从直接绑定元素改为类名控制，再通过JS判断是否已经执行过动画：

1. 修改CSS：

.animate-in {
    animation: transitionIn 0.75s;
}

@keyframes transitionIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

2. 添加JS逻辑：

document.addEventListener('DOMContentLoaded', function() {
    const wrappers = [document.getElementById('main-wrapper'), document.getElementById('features-wrapper')];
    if (!localStorage.getItem('siteAnimated')) {
        wrappers.forEach(el => el.classList.add('animate-in'));
        localStorage.setItem('siteAnimated', 'done');
    } else {
        wrappers.forEach(el => el.style.opacity = '1');
    }
});

原理：第一次打开网站时，localStorage无标记，执行动画并写入标记；之后所有页面加载时，读取到标记就直接让元素保持显示状态，不再触发动画。若需要每次浏览器会话只触发一次，把localStorage换成sessionStorage即可。

方法二：仅在首页触发动画 #

如果需求是只有首页需要淡入效果，给首页的<body>标签加专属类（比如home），再修改CSS：

.home #main-wrapper,
.home #features-wrapper {
    animation: transitionIn 0.75s;
}

@keyframes transitionIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

这样只有首页的元素会应用动画，其他页面无该类，自然不会触发淡入。

内容的提问来源于stack exchange，提问作者lelly