如何实现页面加载时触发的Divi分隔符CSS动画？

问题背景 #

目标元素为Divi内置底部分隔符，默认样式如下：

.et_pb_bottom_inside_divider{ 
  background-size:100% 110px;
  bottom:0;
  height:110px;
}

直接修改该类下height和background-size的高度值为210px可正常生效，确认选择器匹配正确，但编写的CSS动画完全不触发。需求为页面加载后自动播放动画，不需要滚动触发，最终效果为分隔符高度从110px平滑过渡到210px，对应参考图中从红色箭头位置延伸到黄色箭头位置：

原失效代码如下：

.et_pb_bottom_inside_divider {
    animation-name: xcxcxcxc;
    animation-duration: 3s;
    animation-iteration-count: 3;   
}
@keyframes xcxcxcxc {
    0% {background-size:100% 110px!important; height:110px!important;}
    100% {background-size:100% 210px!important; height:210px!important;}
}

失效原因 #

• 核心问题：CSS @keyframes 关键帧规则内不支持!important声明，添加了!important的属性会被浏览器直接忽略，导致动画规则完全失效
• 优先级问题：Divi主题默认样式优先级较高，单独写的动画属性可能被主题原生样式覆盖，无法绑定到目标元素
• 逻辑缺失：未设置动画填充模式，默认情况下动画播放结束后会直接跳回初始高度，不符合常规展示预期

可用代码 #

将以下代码粘贴到WordPress后台「外观-自定义-额外CSS」区域的最末尾，保证优先级高于主题默认样式即可：

.et_pb_bottom_inside_divider {
    animation: dividerGrow 3s ease forwards !important;
}

@keyframes dividerGrow {
    0% {
        background-size: 100% 110px;
        height: 110px;
    }
    100% {
        background-size: 100% 210px;
        height: 210px;
    }
}

参数调整说明：

• 修改3s的数值可以调整动画总时长，数值越大动画越慢
• ease为缓动效果，表现为动画启动慢、中间快、收尾慢，视觉更自然，可根据需求替换为linear（匀速）、ease-in（渐入）、ease-out（渐出）
• forwards表示动画播放完成后保持最终帧状态，不会跳回初始高度
• 如果需要控制播放次数，在ease后加对应数值即可，比如播放3次写为animation: dividerGrow 3s ease 3 forwards !important;，无限循环写为animation: dividerGrow 3s ease infinite forwards !important;

如果添加代码后仍未看到效果，依次清空Divi主题缓存、站点缓存插件缓存、浏览器本地缓存后刷新页面即可。

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