第 19 天：如何在鼠标悬停 SVG 元素上时添加动画

我们还可以使用 CSS 设置更经典的动画。在这里，我们使用关键帧来制作 transform 属性的动画。我们甚至可以在鼠标悬停时触发这种效果。

在这里，我们重复使用之前的铃铛示例，然后在整个铃铛本身和铃舌上添加悬停hover 时的关键帧动画。

<svg class="bell" width="200" height="200" viewBox="-100 -100 200 200">
  <g stroke="#001514" stroke-width="2">
    <circle cx="0" cy="-45" r="7" fill="#4F6D7A" />
    <circle class="bell-tongue" cx="0" cy="50" r="10" fill="#F79257" />
    <path
      d="
        M -50 40
        L -50 50
        L 50 50
        L 50 40
        Q 40 40 40 10
        C 40 -60 -40 -60 -40 10
        Q -40 40 -50 40"
      fill="#FDEA96"
    />
  </g>
</svg>

.bell:hover {
  transform-origin: center 30%;
}

.bell:hover,
.bell:hover .bell-tongue {
  animation-duration: 0.5s;
  animation-delay: -0.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-name: ring;
}

@keyframes ring {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(20deg);
  }
}