顯示器用於關鍵幀和不工作的svg元素

我想知道爲什麼顯示不起作用。在這個蘋果上旋轉&填充顏色也在50％變化但在100％顯示不和蘋果不消失，爲什麼這樣呢？

而且MDN文檔爲displaysaysdisplay是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>

來源

2016-09-16 ItsME

我不是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);

希望這有助於和好運！

來源

2016-09-16 04:46:23 Illdapt

顯示器用於關鍵幀和不工作的svg元素

回答

相關問題