SVG keyframes

[vseverestek]

Can we add keyframes css to svg? If yes, can you please share an example of how to do it?
Currently my Code

  const xml = `<svg width="20" height="20" fill="none" viewBox="0 0 20 20" stroke="#fff" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round">
  <style>
  
  @keyframes bounceAlpha {
      0% {opacity: 1; transform: translateY(0px) scale(1);}
      25%{opacity: 0; transform:translateY(10px) scale(0.9);}
      26%{opacity: 0; transform:translateY(-10px) scale(0.9);}
      55% {opacity: 1; transform: translateY(0px) scale(1);}
    }
    
    .bounceAlpha {
        animation-name: bounceAlpha;
        animation-duration:1.4s;
        animation-iteration-count:infinite;
        animation-timing-function:linear;
    }
    
    .arrow.primera.bounceAlpha {
        animation-name: bounceAlpha;
        animation-duration:1.4s;
        animation-delay:0.2s;
        animation-iteration-count:infinite;
        animation-timing-function:linear;
    }
     .arrow{
        animation-name: bounceAlpha;
        animation-duration:1.4s;
        animation-iteration-count:infinite;
        animation-timing-function:linear;
    }
     .arrow.primera{
        animation-name: bounceAlpha;
        animation-duration:1.4s;
        animation-delay:0.2s;
        animation-iteration-count:infinite;
        animation-timing-function:linear;
    }          
    .primera{
      background:red;
      margin-left:20px;
    }
</style>


  <path dy="-10" class="arrow primera" d="M5 9l4 4 4-4" />
  <path dy="-10" d="M 10,30 9l4 4 4-4" class="arrow segunda" />
  </svg>`
 return (
    <SvgCss xml={xml} />)

[bohdanprog]

Hello @vseverestek,
Unfortunately, we don't support such kind of animation, maybe in the future we will add that feature but now we haven't.