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> 

だから要素は50％から100％にscale(0)scale(1)
から50％、0％で進む に進みこれはすべて動作します。しかし、opacity(0)に達すると、要素は可視に戻ります。

私は@keyframesに何かが見つからないと思いますが、何が分からないのですか？

-----------更新------------
私はある種の特別な馬鹿でなければなりませんが、私は以下を使用します。このSVGで

@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; 
} 

：

<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> 

円は1 にopacity:0;とscale:0;から行くことになっしかし、最初のフレームで、円が完全に表示されています！その後、アニメーションが始まり、動作します。 最初のフレームで円が表示されるのはなぜですか？

Answer 1

animation-fill-mode：forwards;あなたが探しているものと思われるでしょう。

ターゲットには、実行中に検出された最後のキーフレームによって設定された計算値が保持されます。

現在のバックワードキーワードを置き換えることができる略語で設定できます。

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>