Question

尝试学习svg / css动画，我不明白为什么path在悬停时没有动画到opacity: 0，即使其他元素都是动画。

此外，我不明白为什么在动画过程中每个圆圈被顶部的1-2px切割。有人可以向我解释这个黑魔法吗？

编辑＃2问题：问题只与chrome有关，所以我猜它可能是渲染的东西。

提前致谢

svg:hover{
    animation: initopacity .4s linear;
}

svg:hover .circle{
animation: opacity 2s linear;
      animation-delay: .4s;
}

svg:hover .circle1{
animation: opacity 1s linear;
      animation-delay: .4s;
}

svg:hover .circle2{
animation: opacity 4s linear;
      animation-delay: .4s;
}
svg:hover .line{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;   
  animation: dash 3s linear forwards;
  animation-delay: 2.4s;
  
}
@keyframes initopacity {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes opacity {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dash {
  from { stroke-dashoffset: 1000;}
  to { stroke-dashoffset: 0; }
}

<svg width="100" height="100" id="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
  <g>
    <circle class="circle2" cx="2.5" cy="25" r="2.5" fill="#00c99a"/>
    <circle class="circle1" cx="2.5" cy="45" r="2.5" fill="#00c99a"/>
    <circle class="circle" cx="2.5" cy="65" r="2.5" fill="#00c99a"/>
    <!-- col-2 -->
    <circle class="circle" cx="20%" cy="15%" r="2.5" fill="#00c99a"/>
    <circle class="circle1" cx="20%" cy="35%" r="2.5" fill="#00c99a"/>
    <circle class="circle" cx="20%" cy="55%" r="2.5" fill="#00c99a"/>
    <circle class="circle2" cx="20%" cy="75%" r="2.5" fill="#00c99a"/>
    <!-- col-3 -->
    <circle class="circle" cx="37.5%" cy="5%" r="2.5" fill="#00c99a"/>
    <circle class="circle1" cx="37.5%" cy="25%" r="2.5" fill="#00c99a"/>
    <circle class="circle" cx="37.5%" cy="45%" r="2.5" fill="#00c99a"/>
    <circle class="circle2" cx="37.5%" cy="65%" r="2.5" fill="#00c99a"/>
    <circle class="circle" cx="37.5%" cy="85%" r="2.5" fill="#00c99a"/>
    <!-- col-4 -->
    <circle class="circle" cx="55%" cy="15%" r="2.5" fill="#00c99a"/>
    <circle class="circle1" cx="55%" cy="35%" r="2.5" fill="#00c99a"/>
    <circle class="circle2" cx="55%" cy="55%" r="2.5" fill="#00c99a"/>
    <circle class="circle" cx="55%" cy="75%" r="2.5" fill="#00c99a"/>
    <!-- col-5 -->
  
    <circle class="circle1" cx="72.5%" cy="25%" r="2.5" fill="#00c99a"/>
    <circle class="circle" cx="72.5%" cy="45%" r="2.5" fill="#00c99a"/>
    <circle class="circle2" cx="72.5%" cy="65%" r="2.5" fill="#00c99a"/>
  </g>
  <!-- lines | starting from center -->
  <path class="line" d="M 37.5 45 L 20 55 L 20 35 L 37.5 25  L 55 35 L 55 55 L 37.5 65" stroke="#00c99a" fill="rgba(0,0,0,0)" stroke-width="1.5"/>
</svg>

svg路径的不透明度动画

0 个答案: