Angular SCSS动画在Chrome、Safari移动端失效问题求助

问题分析 #

本地用Live Server运行时一切正常，但部署到Netlify后，Chrome和Safari的移动端分辨率下circle-opacity-mobile动画失效，Opera正常。核心原因大概率是Angular生产构建的CSS优化机制误判了媒体查询中引用的动画，将未在初始样式中使用的circle-opacity-mobile动画移除；其次可能是Netlify的缓存残留导致旧样式未更新。

解决方案 #

方案1：用CSS变量统一动画（推荐） #

无需定义两个重复的@keyframes，通过CSS变量动态调整translateY的值，避免构建工具误删未初始引用的动画：

.box {
    position: absolute;
    width: 6rem;
    height: 6rem;
    border-radius: 6px;
    background: #d8a6a6;
    box-shadow: inset 8px -3px 10px #7f6262, inset -8px 3px 10px #ffeaea;

    /* 定义移动端需要修改的变量 */
    --translate-offset: -25vh;

    /* Animation properties */
    animation-name: circle-opacity;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    cursor: pointer;

    transition: 0.5s;
    text-align: center;
    align-items: center;
}

@keyframes circle-opacity {
    0% {
        transform: rotate(0deg) translateY(var(--translate-offset)) rotate(0deg);
    }
    50% {
        transform: rotate(180deg) translateY(var(--translate-offset)) rotate(-190deg);
    }
    100% {
        transform: rotate(360deg) translateY(var(--translate-offset)) rotate(-360deg);
    }
}

@media screen and (max-width:526px) {
    .box {
        --translate-offset: -18vh; /* 仅修改变量值，复用同一个动画 */
        width: 4rem;
        height: 4rem;
    }
    .box span {
        font-size: 0.6rem !important;
    }

    .box:hover span {
        font-size: 0.7rem !important;
    }
}

方案2：调整Angular构建的CSS优化配置 #

如果要保留两个独立动画，可修改angular.json中的构建配置，避免CSS压缩工具误删@keyframes：

1. 先临时关闭CSS压缩测试是否解决问题：

{
  "architect": {
    "build": {
      "options": {
        "optimization": {
          "scripts": true,
          "styles": {
            "minify": false, /* 关闭CSS压缩 */
            "inlineCritical": false
          },
          "fonts": true
        }
      }
    }
  }
}

2. 若关闭压缩后正常，可自定义CSS压缩规则，添加保留@keyframes的配置（需安装cssnano-preset-advanced并配置）。

方案3：清除Netlify缓存并重新部署 #

登录Netlify后台，进入对应项目的Deploys页面，点击右上角的Clear cache and deploy site，强制重新构建部署，排除缓存残留问题。

方案4：添加浏览器前缀（兼容旧版本浏览器） #

虽然现代浏览器已支持标准@keyframes，但可尝试添加-webkit前缀确保兼容性：

@-webkit-keyframes circle-opacity-mobile {
    0% {
        transform: rotate(0deg) translateY(-18vh) rotate(0deg);
    }
    50% {
        transform: rotate(180deg) translateY(-18vh) rotate(-190deg);
    }
    100% {
        transform: rotate(360deg) translateY(-18vh) rotate(-360deg);
    }
}
@keyframes circle-opacity-mobile {
    0% {
        transform: rotate(0deg) translateY(-18vh) rotate(0deg);
    }
    50% {
        transform: rotate(180deg) translateY(-18vh) rotate(-190deg);
    }
    100% {
        transform: rotate(360deg) translateY(-18vh) rotate(-360deg);
    }
}

@media screen and (max-width:526px) {
    .box {
        animation-name: -webkit-circle-opacity-mobile, circle-opacity-mobile;
        width: 4rem;
        height: 4rem;
    }
    /* 其他样式不变 */
}

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