Можно ли совместить две css анимации в один элемент?

Question

[Артем Синеговский]

У меня есть 2 анимации

.svg-elem-2 {
  
  stroke:#000;
  stroke-width:20;
  stroke-dasharray:14744;
  stroke-dashoffset:0;
  animation: drakp 10s 0.5 forwards;
  animation-delay: 0s;
  
}
@keyframes drakp {
0%,100% {stroke-dashoffset: 14744;}
50% {stroke-dashoffset:0; }

}
.svg-elem-2 {
  fill: transparent;
  -webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
		  transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
		  animation: drak 3s 0.5 forwards;
		  animation-delay: 4s
}
@keyframes drak {
0% {}
90% {fill: #000;}
}

, мне надо их вставить в

<path d="M8550 2403 c-188 -32 -350 -121 -491 -271 -164 -174 -249 -385 -265
-658 -23 -376 152 -668 465 -777 158 -56 381 -48 551 18 264 104 484 362 560
660 41 161 43 376 5 520 -68 257 -267 448 -517 499 -71 15 -245 20 -308 9z
m266 -197 c158 -42 287 -174 339 -346 28 -95 30 -249 5 -369 -41 -203 -110
-340 -232 -462 -135 -136 -309 -202 -473 -178 -214 30 -364 164 -420 376 -33
122 -17 361 35 513 75 218 270 410 471 464 69 19 209 20 275 2z" class="svg-elem-2"/>

. По отдельности они работают, но при попытке их совместить, ничего не получается. Спасибо