CSS 动画不透明度(0) 回到 1

Question

我正在使用 a@keyframes从 0% 到 50% 再到 100%。
在百分比期间，我想更改 svg 元素的行为。

@keyframes scale {
0% {
    transform: scale(0);
    transform-origin: 50% 50%;
}
50% {
    transform: scale(1);
    transform-origin: 50% 50%;
}
100% {
    opacity:0;
}
}

.head_top{ 
    animation: scale 1s ease-in-out 1 backwards;
}

SVG 元素：

<g><!-- HEAD TOP -->
    <path class="head_top" d="M381,230.571h.008A191.367,191.367,0,0,1,555.278,342.83a177.166,177.166,0,1,0-348.555,0A191.373,191.373,0,0,1,381,230.571Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
</g>

所以元素从 0% 到 50% 从 ascale(0)到 ascale(1)
从 50% 到 100%opacity到 0。
这一切都有效。然而，在opacity(0)到达之后，该元素恢复可见。

我想我遗漏了一些东西，@keyframes但不知道是什么！

-----------更新------------
我一定是某种特别愚蠢的人，但我使用了以下内容。

@keyframes fadeout {
0% {
    transform: scale(0);
    transform-origin: 50% 50%;
    opacity:0;
}
50% {
    transform: scale(1);
    transform-origin: 50% 50%;
    opacity:1;
}
100% {
    opacity:0;
}
}
.chin{ 
    animation: fadeout 1s ease-in-out 1 forwards; animation-delay: 2s;  
}

有了这个 SVG：

<g><!-- CHIN -->
    <circle class="chin" cx="414.4" cy="545.4" r="109.5" fill="#fff" stroke="#000" stroke-miterlimit="10" stroke-width="5.012"/>
</g>

圆是应该去的opacity:0;和scale:0;为1，但在第一帧的圆圈是完全可见！之后动画开始并工作。为什么圆圈在第一帧上可见？

Answer 1

动画填充模式：转发；似乎是你要找的。

目标将保留由执行期间遇到的最后一个关键帧设置的计算值。

您可以在速记中设置它，它将替换您当前拥有的向后关键字。

html, body {
  width: 100%;
  height: 100%;
}

@keyframes scale {
0% {
    transform: scale(0);
    transform-origin: 50% 50%;
}
50% {
    transform: scale(1);
    transform-origin: 50% 50%;
}
100% {
    opacity:0;
}
}

.head_top{ 
    animation: scale 1s ease-in-out 1 forwards;
}

<svg width="100%" height="100%">
  <g><!-- HEAD TOP -->
    <path class="head_top" d="M381,230.571h.008A191.367,191.367,0,0,1,555.278,342.83a177.166,177.166,0,1,0-348.555,0A191.373,191.373,0,0,1,381,230.571Z" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"/>
</g>
  </svg>