基于4个SVG文件实现眨眼动画的技术实现咨询

需求说明 #

需要基于4个SVG文件实现眨眼动画，流程为：SVG1 → SVG2 → SVG3 → SVG4（黑色圆形），再反向过渡回SVG1，循环执行。此前尝试CSS路径动画效果不理想，现需要完整实现方案。

实现思路 #

放弃复杂的路径变形动画，改用多SVG切换的方式：将4个SVG叠加在同一位置，通过CSS控制每个SVG的opacity和visibility，按时间顺序显示/隐藏，实现平滑过渡。这种方式逻辑简单，适合新手，且动画效果稳定。

完整代码实现 #

HTML结构

将所有SVG放入同一容器，添加类名区分并设置重叠定位：

<div class="eye-container">
  <!-- SVG 1 -->
  <svg class="eye-svg eye-1" viewBox="0 0 64.5 65.01">
    <defs>
      <style>
        .cls-1 { fill: none; }
        .cls-2 { fill: #fff; }
      </style>
    </defs>
    <rect class="cls-1" x="0" y=".25" width="64.5" height="64.5"/>
    <g>
      <path d="m32.25,14.36c13.2-.06,25.45,6.83,32.25,18.15C64.64,14.69,50.32.14,32.5,0,14.69-.14.14,14.19,0,32c0,.17,0,.34,0,.51C6.8,21.19,19.05,14.29,32.25,14.36"/>
      <path d="m32.25,50.65C19.05,50.72,6.8,43.82,0,32.5c-.14,17.81,14.18,32.36,32,32.5,17.81.14,32.36-14.18,32.5-32,0-.17,0-.34,0-.51-6.8,11.31-19.05,18.21-32.25,18.15"/>
      <path d="m18.25,32.5c0-7.73,6.27-14,14-14s14,6.27,14,14-6.27,14-14,14h0c-7.73,0-14-6.27-14-14"/>
      <path class="cls-2" d="m23.77,31.66c5.8-1.48,7-2.68,8.48-8.48,1.48,5.8,2.68,7,8.48,8.48-5.8,1.48-7,2.68-8.48,8.48-1.48-5.8-2.68-7-8.48-8.48"/>
    </g>
  </svg>

  <!-- SVG 2 -->
  <svg class="eye-svg eye-2" viewBox="0 0 64.5 65">
    <style type="text/css">
      .st0{fill:none;}
      .st1{fill:#FFFFFF;}
    </style>
    <rect y="0.2" class="st0" width="64.5" height="64.5"/>
    <g>
      <path d="M18.2,32.5c0-7.7,6.3-14,14-14s14,6.3,14,14s-6.3,14-14,14l0,0C24.5,46.5,18.2,40.2,18.2,32.5"/>
      <path class="st1" d="M23.8,31.7c5.8-1.5,7-2.7,8.5-8.5c1.5,5.8,2.7,7,8.5,8.5c-5.8,1.5-7,2.7-8.5,8.5C30.8,34.3,29.6,33.1,23.8,31.7"/>
      <g>
        <path d="M32.2,50.7C19,50.7,6.8,43.8,0,32.5C-0.1,50.3,14.2,64.9,32,65s32.4-14.2,32.5-32c0-0.2,0-0.3,0-0.5C57.7,43.8,45.5,50.7,32.2,50.7z"/>
        <path d="M32.3,0C14.3,0-0.3,14.6-0.3,32.5H0C6.4,26.8,18.5,23,32.2,23s25.8,3.8,32.2,9.5h0.1h0.3C64.8,14.6,50.2,0,32.3,0z"/>
      </g>
    </g>
  </svg>

  <!-- SVG 3 -->
  <svg class="eye-svg eye-3" viewBox="0 0 65.01 65.01">
    <defs>
      <style>
        .cls-1 { fill: none; }
        .cls-2 { fill: #fff; }
      </style>
    </defs>
    <rect class="cls-1" x=".26" y=".25" width="64.5" height="64.5"/>
    <path d="m18.5,32.5c0-7.73,6.27-14,14-14s14,6.27,14,14-6.27,14-14,14h0c-7.73,0-14-6.27-14-14"/>
    <path class="cls-2" d="m24.03,31.66c5.8-1.48,7-2.68,8.48-8.48,1.48,5.8,2.68,7,8.48,8.48-5.8,1.48-7,2.68-8.48,8.48-1.48-5.8-2.68-7-8.48-8.48"/>
    <g>
      <path d="m65.01,32.5C65.01,14.55,50.46,0,32.51,0S0,14.55,0,32.5"/>
      <path d="m0,32.5c0,17.95,14.55,32.5,32.5,32.5s32.5-14.55,32.5-32.5m-.25,0c-6.44,5.71-18.47,9.55-32.25,9.55S6.7,38.21.25,32.5"/>
    </g>
  </svg>

  <!-- SVG 4 -->
  <svg class="eye-svg eye-4" viewBox="0 0 64.75 64.75">
    <circle cx="32.38" cy="32.38" r="32.38"/>
  </svg>
</div>

CSS样式

设置容器和SVG的基础样式，编写切换动画：

.eye-container {
  position: relative;
  width: 64px;
  height: 64px;
}

.eye-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
}

/* 眨眼动画关键帧：正向+反向过渡 */
@keyframes blink {
  /* 初始状态：显示SVG1 */
  0%, 10% {
    .eye-1 { opacity: 1; visibility: visible; }
    .eye-2, .eye-3, .eye-4 { opacity: 0; visibility: hidden; }
  }
  /* 切换到SVG2 */
  15%, 25% {
    .eye-2 { opacity: 1; visibility: visible; }
    .eye-1, .eye-3, .eye-4 { opacity: 0; visibility: hidden; }
  }
  /* 切换到SVG3 */
  30%, 40% {
    .eye-3 { opacity: 1; visibility: visible; }
    .eye-1, .eye-2, .eye-4 { opacity: 0; visibility: hidden; }
  }
  /* 切换到SVG4（闭眼） */
  45%, 55% {
    .eye-4 { opacity: 1; visibility: visible; }
    .eye-1, .eye-2, .eye-3 { opacity: 0; visibility: hidden; }
  }
  /* 反向切换到SVG3 */
  60%, 70% {
    .eye-3 { opacity: 1; visibility: visible; }
    .eye-1, .eye-2, .eye-4 { opacity: 0; visibility: hidden; }
  }
  /* 反向切换到SVG2 */
  75%, 85% {
    .eye-2 { opacity: 1; visibility: visible; }
    .eye-1, .eye-3, .eye-4 { opacity: 0; visibility: hidden; }
  }
  /* 回到SVG1 */
  90%, 100% {
    .eye-1 { opacity: 1; visibility: visible; }
    .eye-2, .eye-3, .eye-4 { opacity: 0; visibility: hidden; }
  }
}

/* 给容器应用循环动画 */
.eye-container {
  animation: blink 4s infinite;
}

自定义调整说明 #

• 动画时长：修改blink动画后的4s参数，可加快或减慢整体动画速度
• 状态停留时间：调整关键帧的百分比区间，比如延长闭眼状态可扩大45%,55%的范围
• 过渡速度：修改.eye-svg中的transition: opacity 0.2s ease-in-out的0.2s参数，调整切换平滑度

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