如何用CSS实现SVG线条旋转动画（复刻GIF效果）

问题核心 #

要复刻的是雨伞两条支撑线左右摆动的动画，当前旋转线条时位置偏移，原因是默认旋转原点为元素左上角，而非线条的固定端点（伞柄连接处）。

第一步：修复旋转定位问题 #

通过设置transform-origin: 0 0，让线条绕自身起点（雨伞伞柄连接点）旋转，避免位置偏移：

svg {
  width: 200px;
}

svg [data-name="right-line"] {
  transform-origin: 0 0; /* 绕线条起点旋转 */
  transform: rotate(10deg);
}

第二步：实现摆动动画 #

定义关键帧动画模拟左右摆动，同时给两条线条添加错开的动画延迟，还原GIF的自然摆动节奏：

svg {
  width: 200px;
}

/* 定义左右摆动的关键帧 */
@keyframes swing {
  0% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}

/* 给两条线条统一应用动画与旋转原点 */
svg [data-name="right-line"],
svg line:not([data-name="right-line"]) {
  transform-origin: 0 0;
  animation: swing 1.2s ease-in-out infinite;
}

/* 左边线条延迟动画，让摆动节奏更贴近原GIF */
svg line:not([data-name="right-line"]) {
  animation-delay: 0.2s;
}

完整代码示例 #

<div>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 27.97 18.494">
    <g transform="translate(-.443292 0.304)">
      <g>
        <path d="M27.4,6.782c-7.609244-6.906331-19.218756-6.906331-26.828,0-.650213.586438-.76011,1.566067-.256,2.282l6.275,8.9c.444698.629922,1.252268.890007,1.981.638c1.738708-.602319,3.56592-.909558,5.406-.909h.007c1.84008-.000558,3.667292.306681,5.406.909.728522.251159,1.535402-.008297,1.981-.637l6.282-8.9c.50474-.715762.395717-1.69568-.254-2.283" transform="translate(.443-1.906)" fill="#9fbee8"/>
      <g>
        <line data-name="right-line" x1="0" y1="0" x2="7.313" y2="10.378" transform="translate(9.557 6.418001)" fill="none" stroke="#034ea2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <line x1="0" y1="0" x2="7.313" y2="10.378" transform="translate(4.983 6.418001)" fill="none" stroke="#034ea2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </g>
      </g>
    </g>
  </svg>
</div>

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