Question

我有一个在悬停时带有动画的svg。首先，圆会扩大一点，路径会向上平移15px，然后经过延迟，动画内部的路径。该代码在chrome上运行正常，但是在Firefox上却引起了错误。该路径会向上平移，但是在等待动画开始时会捕捉回到0。我发现如果删除动画延迟属性，则该错误不存在。

@keyframes raindrop{
  0%{
    transform: translate(0px, -15px) scaleY(1);
  }
  50%{
    transform: translate(0px, -15px) scaleY(0.7);
  }
}
circle{
  fill: #fff;
  stroke: #faaec0;
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.15s linear;
}
path{
  transition: transform 0.15s linear;
  transform-origin: center;
}
g:hover circle{
    transform: scale(1.3);
}  
g:hover path{
    transition-delay: 0.15s;
    transform: translateY(-15px);
    animation-name: raindrop;
    animation-delay: 0.45s;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 425" fill="#faaec0">
  <g id="icon-1" class="icon-g">
    <circle cx="118.2" cy="307.4" r="51"></circle>
    <path class="energy" d="M114.22,310.48H114l-11,19.43,34.27-27.63H119.65l14.12-15.2H114.94L99.13,309.22h15.08v.24h.36l-.36.72Z"></path>
  </g>
</svg>

使用动画延迟时的FIrefox错误

0 个答案: