marqueeをCSSに代替するには。

marqueeタグは廃止されるそうですが、CSSで代替できると聞きました。
下記のソースコードにあるような『方向』や『速度』などをCSSに置き換えるには、
どのようにしたらいいのでしょうか。ご教示ください。

<style>
.DIRECTION {
  color: white;
  background: black;
}

.BLINK {
  animation: blink 1s step-end infinite normal;
}
@keyframes blink {
  0% { color: red; }
  50% { color: transparent; }
}
</style>

<SCRIPT type="text/javascript">
<!--
function marLeft() {

    myMarquee.direction='left';
　　document.getElementById('myMarquee').start(); 
    document.getElementById("blinkL").classList.add("BLINK");
    document.getElementById("blinkR").classList.remove("BLINK");
}

function marRight() {
    myMarquee.direction='right';
　　document.getElementById('myMarquee').start(); 
    document.getElementById("blinkR").classList.add("BLINK");
    document.getElementById("blinkL").classList.remove("BLINK");
}


function marSpeed(opt){
　　var selectedIndex = opt.selectedIndex;

　　　　document.getElementById('myMarquee').setAttribute('scrollamount', 6, 0);
  　　  document.getElementById('blinkL').disabled=false;
  　　  document.getElementById('blinkR').disabled=false;
if(selectedIndex==0){
　　　　document.getElementById('myMarquee').setAttribute('scrollamount', 12, 0);
　  　}
else if(selectedIndex==2){
　　　　document.getElementById('myMarquee').setAttribute('scrollamount', 1, 0);
　　　}
else if(selectedIndex==3){
　　　　document.getElementById('blinkL').disabled=true;
　　　　document.getElementById('blinkR').disabled=true;
        document.getElementById('blinkL').classList.remove("BLINK");
　　　　document.getElementById('blinkR').classList.remove("BLINK");
　　　　document.getElementById('myMarquee').stop();
　　　}
else if(selectedIndex==4){
    var oldMarquee = document.querySelector('#myMarquee');
    oldMarquee.parentNode.insertBefore(oldMarquee.cloneNode(true), oldMarquee);
    oldMarquee.parentNode.removeChild(oldMarquee);

    myMarquee.direction='left';
    document.getElementById("blinkL").classList.add("BLINK");
    document.getElementById("blinkR").classList.remove("BLINK");
    document.getElementById('marSpeed').value="Normal Speed";
     }
}
// -->
</SCRIPT>

<marquee scrollamount="6" id="myMarquee">

<p>How to replace marquee with CSS.</p>

</marquee>


  <input id="blinkL" type="button" class="DIRECTION BLINK" onclick="marLeft();" value="←"> 
       ☆
<select id='marSpeed' name="speedSelector" onchange='marSpeed(this)'>
  <option  value='Faster'>&nbsp;&nbsp;&nbsp;Faster</option>
  <option  value='Normal Speed' selected>&nbsp;&nbsp;&nbsp;(Speed)</option>
  <option  value='Slower'>&nbsp;&nbsp;&nbsp;Slower</option>
  <option  value='Stop'>―STOP―</option>
  <option  value='Reset'>&nbsp;&nbsp;&nbsp;RESET</option>
</select>
       ☆
  <input id="blinkR" type="button" class="DIRECTION" onclick="marRight();" value="→">