CSS动画不透明度（0）回到1 [重复]

Question

我正在使用 @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>

所以元素从 scale(0) 到 scale(1) 从 0% 到 50%
从 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

animation-fill-mode:转发；看起来就是你要找的东西。

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

您可以将其设置为简写，它将替换您当前拥有的向后关键字。

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>