WordPress实现页面完全加载后触发CSS动画的方案需求

核心思路 #

默认不加载动画样式，待页面所有资源（图片、CSS、JS等）加载完成后，通过JavaScript给目标元素添加包含动画的类，触发动画执行。

步骤1：调整CSS代码 #

将动画相关属性从默认样式中剥离，放到单独的类里：

@keyframes fade-in-left-to-right {
    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

.svg-one {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 0;
    top: 25%;
    width: 14%;
}

.svg-one svg {
    position: absolute;
    display: block;
    width: 23vw;
    height: auto;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    opacity: 0.5;
    /* 移除默认动画，仅保留基础样式 */
}

/* 新增动画触发类 */
.svg-one svg.animate-svg {
    animation: fade-in-left-to-right 2.5s linear forwards;
    animation-delay: 1.2s;
}

.svg-one svg:nth-child(1) {
    top: 0px;
}

.svg-one svg:last-child {
    top: 70px;
}

步骤2：添加页面加载监听脚本 #

选择以下任意一种脚本，添加到WordPress中：

原生JavaScript（无依赖，推荐）

window.addEventListener('load', function() {
    const svgElements = document.querySelectorAll('.svg-one svg');
    svgElements.forEach(svg => svg.classList.add('animate-svg'));
});

jQuery版本（适用于已加载jQuery的主题）

jQuery(window).on('load', function() {
    jQuery('.svg-one svg').addClass('animate-svg');
});

脚本添加方式 #

• 直接将代码粘贴到主题footer.php文件的</body>标签之前；
• 通过WordPress后台「外观」→「自定义」→「自定义HTML」块添加到目标页面；
• 使用Code Snippets等插件添加自定义脚本。

原理说明 #

window.load事件会在页面所有资源（包括图片、字体、样式表等）完全加载完成后触发，此时给SVG元素添加animate-svg类，动画才会开始执行，确保动画仅在页面100%加载后生效。

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