Анимация при вставке html кода

.c_play {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    fill: #fff;
    width: 60px;
    z-index: 2;
    margin-left: -30px;
    margin-top: -30px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    animation: anip .5s linear 1 normal forwards;
    pointer-events: none;
}
@keyframes anip {0%{opacity:1}to{opacity:0; transform:scale(2)}}

<svg class="c_play" viewBox="0 0 36 36">
    <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
</svg>

Изначально выставлено свойство display: none; Убираем свойство и происходит анимация. Через js, прибегаю к settaimayt. Через .5 сек, вновь выставляю display:none.

Вопрос в том, возможно ли не прибегая к изменениям свойства display. Выполнить один раз анимацию, когда помещаем блок path в родителя svg??

Другими словами: Через js, меняем содержимое svg блока. Помещаем туда

<path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>

В данный момент как только поместили, возможно выполнить анимацию?

Вешаю на path, который вставляю по клику

path {
    fill: #fff;
    width: 50%;
    z-index: 2;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    animation: anips 1s linear 1 normal forwards;
    pointer-events: none;
}
@keyframes anips {0%{width: 50%;}to{width: 100%;opacity:0;}}

Дак, выполнить такую же анимацию не удается. Не изначальную ширину ни фона не выставляется, чтобы в дальнейшем применить анимацию...