下記のソースコードは、marqueeの方向指示ボタンの背景色に、animation styleを設定しようと
試みたものですが、うまくいきません。文字が左に移動しているときは左の方向指示ボタンの背景色に，
文字が右に移動しているときは右の方向指示ボタンの背景色に、"点滅"のanimation styleを設定したいのです。
どのように書き換えれば、よろしいでしょうか。ご教示ください。

```ここに言語を入力
<STYLE type="text/css"> 
#blinkL { background:pink;
         -webkit-animation:blinkL 2s ease-in-out infinite alternate; 
         -moz-animation:blinkL 2s ease-in-out infinite alternate; 
          animation:blinkL 2s ease-in-out infinite alternate; 
} 
@-webkit-keyframes blinkL{ 
      0% {opacity:0;}
    100% {opacity:1; }
}
@-moz-keyframes blinkL{ 
      0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blinkL{ 
      0% {opacity:0;}
    100% {opacity:1;}
}

#blinkR{ background:pink;
         -webkit-animation:blinkR 2s ease-in-out infinite alternate; 
         -moz-animation:blinkR 2s ease-in-out infinite alternate; 
          animation:blinkR 2s ease-in-out infinite alternate; 
} 
@-webkit-keyframes blinkR{ 
      0% {opacity:0;}
    100% {opacity:1; }
}
@-moz-keyframes blinkR{ 
      0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blinkR{ 
      0% {opacity:0;}
    100% {opacity:1;}
}
</STYLE>

<SCRIPT type="text/javascript">
 <!--
       flg=false;
          function Stop_Start(){
             flg = !flg;
             document.myForm.stopStart.value=flg?"START":"STOP";
   if(flg) {
                document.getElementById("myMarquee").stop();
    } else {
                document.getElementById("myMarquee").start();
    }
 }

        function directL(){
             document.getElementById("blinkL").style.animation="";
             document.getElementById("blinkR").style.animation=0;
                          }
        function directR(){
             document.getElementById("blinkL").style.animation=0;
             document.getElementById("blinkR").style.animation="";
                          }
 //-->
</script>

<marquee id="myMarquee">ttttt</marquee>

<form name="myForm" style="text-align:center;">
  <INPUT id="blinkL" type="button" onclick="myMarquee.direction='left'; directL();" value="←"> 
  <input type="button" name="stopStart" value=" STOP " onClick="Stop_Start()">
  <INPUT id="blinkR" type="button" style="animation:0;" onclick="myMarquee.direction='right'; directR();" value="→"> 
</form>

```