CSS　@keyframesについて

①keyframesがインラインスタイルで定義されていること
②ブロック要素になっておらずtransformが効かないこと
の2つが原因かと思います。

①keyframesの定義をstyleタグの中に書くか、別CSSファイルに記述して読み込むようにする
②ブロック要素になるようにスタイルを指定するか、div要素などブロック要素にする
そうすれば動くようになるかと思います。

See the Pen Untitled by yotty (@yotty) on CodePen.

<span>で使うためにはdisplay: inline-block;が必要みたいです。

<p>- 
  <span class="triangel" style="
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    } 50% {
      transform: translateY(5px);
    }
  }
  animation: bounce 1s infinite;
  display: inline-block;
">▼</span>
 -</p>