请考虑this示例。
我不知道为什么显示无法正常工作。在此苹果旋转填充颜色时,其颜色也会以50%改变,但在100%时显示不会,并且苹果不会消失,为什么会这样呢?MDN
says display
的display
文档也是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);
希望这会有所帮助,并祝你好运!