请考虑this示例。

我不知道为什么显示无法正常工作。在此苹果旋转填充颜色时,其颜色也会以50%改变,但在100%时显示不会,并且苹果不会消失,为什么会这样呢?

MDN says displaydisplay文档也是animatable



* {
  padding: 0px;
  margin: 0px;
  border: 3px dotted black;
}
.group {
  transform-origin: center;
  animation: animateApple 1s linear;
}
@keyframes animateApple {
  0% {} 50% {
    fill: yellow;
    transform: rotate(-150deg);
  }
  100% {
    display: none;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="504" height="504" viewBox="0 0 504 504">
  <g class="group">
    <path d="M415.8 134.3c0 0 70 59.2 16.7 211.7 0 0-34.2 108.7-123.3 133.3 0 0-18.3 9.2-44.2-4.2 0 0-15.8-14.2-56.7-0.8 0 0-22.5 8.3-50.8-13.3 0 0-125.8-102.5-136.7-215.8 0 0-14.2-92.5 85-128.3 0 0 60.8-19.2 109.2 15.8 0 0-15-57.5-38.3-90.8 0 0 25.8-21.7 38.3-1.7 0 0 15.8 20.8 30.8 94.2 0 0 3.3-2.5 25-11.7 0 0 80.8-77.5 204.2-61.7C475 61 467.5 101 415.8 134.3z"
    />
    <path fill="#006600" d="M247 157c0 0 73.3-96 218.7-90 0 0-18 54-85.3 77.3 0 0-58.7 26-132.7 20L247 157z" />
    <path fill="#660000" d="M188.3 43c0 0 14-12.7 22 2.7 0 0 40 74.7 26 144 0 0-10 4.7-6-21.3 0 0 4.7-8-10.7-48C219.7 120.3 198.3 58.3 188.3 43z" />
    <path fill="#990000" d="M247 171.7c0 0 89.3 11.3 162.7-34 0 0 52.7 51.3 31.3 152 0 0-20 128-109.3 173.3 0 0-32.7 17.3-50 8 0 0-30-18.7-75.3-4 0 0-25.3 6.7-38.7-8.7 0 0-104.7-89.3-132.7-180 0 0-32-88 45.3-142 0 0 65.3-42.7 140.7 7.3 0 0 4.7 16.7 2 32 0 0-1.3 29.3 16.7 18.7C239.7 194.3 247 186.3 247 171.7z"
    />
  </g>
</svg>

最佳答案

我不确定100%,但是我不相信您可以设置display: none的动画

这确实可以使苹果消失:

@keyframes animateApple{
    0%{
    }
    50%{
        fill:yellow;
        transform: rotate(-150deg);
    }
    100%{
       opacity: 0;
    }
}


您始终可以添加其他关键帧来完善动画淡入时间。

使用javascript的JQuery库的另一种选择。这将使用setTimout()函数。

   setTimeout(function() {
       $(group).css('display', 'none');
   }, 1000);


希望这会有所帮助,并祝你好运!

10-05 20:58
查看更多