Прозрачность анимации 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> 

Так что элемент идет на 0% до 50% по сравнению с scale(0) к scale(1)
от 50% до 100%, то opacity переходит в 0.
Все это работает. Однако после достижения opacity(0) элемент возвращается к видимым.

Я думаю, что у меня что-то отсутствует в моем @keyframes, но не могу понять, что!

----------- UPDATE ------------
Я должен быть чем-то особенным глупым, но я использую следующее.

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