Перенести анимацию c css на svg

 .arrow_b {
      position: absolute;
      top: 50%;
      right: 10%;
      transform: translateY(-50%);
      font-size: 14px;
      width: 150px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #000000b3;
      box-shadow: 0 0 3px 0 rgb(0 0 0);
      animation: opacity 1s linear 1 normal forwards;
      opacity: 0; 
    }
    
    @keyframes opacity {to {opacity: 1}}
    
    .arrow_b[data-side=left] {
      left: 10%;
      right:unset;
      text-align: right;
    }
    
    .arrow_b.fl[data-side=left] {
      right: unset;
      left: 0;
      width: 45%;
      height: 100%;
      justify-content: end;
      padding: 20px;
      border-radius: 0 100% 100% 0;
      background: #6262626e;
    }
    
    .tooltip {padding-top: 8px;color: #ddd}
    
    .arrow span {
      border: 10px solid transparent;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      display: inline-block;
      animation-duration: 1.2s;
      animation-iteration-count: infinite
    }
    
    [data-side=left] .arrow span {border-right: 11px solid #ddd}
    [data-side=left] .arrow span:nth-child(3) {animation-name: arrow-1}
    [data-side=left] .arrow span:nth-child(2) {animation-name: arrow-2}
    [data-side=left] .arrow span:nth-child(1) {border-left: 0px; animation-name: arrow-3}
    
    @keyframes arrow-1 {
      0% {opacity: 0}
      17% {opacity: .9}
      33% {opacity: .6}
      50% {opacity: .3}
      67% {opacity: .3}
      83% {opacity: .3}
      to {opacity: 0}
    }
    
    @keyframes arrow-2 {
      0% {opacity: 0}
      17% {opacity: .3}
      33% {opacity: .9}
      50% {opacity: .6}
      67% {opacity: .3}
      83% {opacity: .3}
      to {opacity: 0}
    }
    
    @keyframes arrow-3 {
      0% {opacity: 0}
      17% {opacity: .3}
      33% {opacity: .3}
      50% {opacity: .9}
      67% {opacity: .6}
      83% {opacity: .3}
      to {opacity: 0}
    }
    

  

  <div class="arrow_b" data-side="left">
        <div>
            <div class="arrow">
                <span></span><span></span><span></span>
            </div>
            <div class="tooltip">Текст</div>
        </div>
    </div>