如何在Vue应用首屏加载时为加载图片添加动画效果

• 方案1：内联CSS动画（优先推荐，稳定性最高）
  你之前CSS动画偶发失效的核心原因是动画样式写在了外部业务CSS文件中，首屏加载阶段Vue相关打包资源还未加载完成，样式未生效导致。直接把动画代码内联到index.html的<head>标签内即可解决：

<head>
  <!-- 保留原有head的所有内容，新增以下样式 -->
  <style>
    @keyframes pulseScale {
      0% { transform: translate(-50%, -50%) scale(0.5); }
      50% { transform: translate(-50%, -50%) scale(1); }
      100% { transform: translate(-50%, -50%) scale(0.5); }
    }
    .img-logo {
      animation: pulseScale 1s infinite ease-in-out;
    }
  </style>
</head>

你也可以根据需求修改动画规则，实现旋转、渐隐等其他加载效果。

• 方案2：修复现有SVG animateTransform 动画
  你当前SVG动画无效果是因为<g>元素默认变换原点为左上角，缩放效果没有以logo中心为基准，看起来像未触发动画。修改<g class="cls-1">标签添加两个属性即可：

<g class="cls-1" transform-origin="50% 50%" transform-box="fill-box">
  <!-- 原有animateTransform标签和内层Layer_2内容保持不变 -->
</g>

补充注意项 #

Vue实例挂载完成后需要手动移除加载容器，避免遮挡业务内容，在项目入口main.js中添加逻辑即可：

new Vue({
  render: h => h(App),
  mounted() {
    document.getElementById('loading__container')?.remove()
  }
}).$mount('#app')

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