CSS Animation+Media Queries在WordPress Divi中失效问题求助

1. 解决图片尺寸异常问题 #

• 用浏览器开发者工具（F12）检查图片元素的计算样式，确认是否被Divi全局样式（如max-width:100%）覆盖。针对性添加高优先级样式：

  .polaroid-container img {
    max-width: none !important;
    width: var(--polaroid-width) !important; /* 匹配你动画中定义的宽度变量 */
    height: auto !important;
  }
  

• 给动画根容器添加明确的尺寸约束，避免被Divi的模块容器挤压：

  .polaroid-container {
    width: 100% !important;
    height: 600px !important; /* 自定义合适高度 */
    position: relative !important;
    overflow: visible !important;
  }
  

2. 修复动画不执行的问题 #

• 避免Divi压缩CSS导致关键帧冲突，给动画和关键帧添加唯一前缀：

  @keyframes lr-polaroid-fall {
    /* 原关键帧逻辑 */
  }
  .lr-polaroid-item {
    animation: lr-polaroid-fall 3s ease-in-out forwards !important;
  }
  

• 将动画CSS迁移到Divi的主题选项>自定义CSS区域，而非代码模块内，提升样式优先级并避免被模块过滤。

3. 修正HTML结构被篡改的问题 #

• Divi代码模块可能自动添加额外包裹层，导致动画元素层级失效。给动画元素添加明确的定位属性：

  .lr-polaroid-item {
    position: absolute !important;
    z-index: 1 !important;
  }
  

• 检查HTML结构，确保动画容器的子元素未被Divi自动添加的p/div标签嵌套破坏。

4. 优化动画触发时机 #

• 改用window.load事件触发动画，确保所有资源（包括Divi动态加载的元素）完全就绪：

  window.addEventListener('load', function() {
    setTimeout(() => {
      document.querySelectorAll('.lr-polaroid-item').forEach(el => {
        el.classList.add('animate-active');
      });
    }, 300);
  });
  

• 移除CSS中直接定义的animation属性，通过JS动态添加包含动画的类，避免Divi提前加载导致动画不触发。

5. 排查Divi性能优化冲突 #

• 临时禁用Divi的“静态CSS生成”“JS压缩”“图片延迟加载”功能，测试动画是否恢复正常。
• 若需开启优化，将动画相关的CSS/JS文件加入优化工具的排除列表，防止被篡改或延迟加载。

内容的提问来源于stack exchange，提问作者Liam Robb O'Hagan