Бегущая строка без использования тега <marquee>

document.getElementById("button").onclick = function() { 
  var value = document.getElementById("input").value; 
  document.getElementById('marquee').innerHTML = '<span>'+ value +'</span>'; 
};

#marquee { 
    display: block; 
    width: 100%; 
    line-height: 50px; 
    white-space: nowrap; 
    color: red; 
    overflow: hidden; 
    box-sizing: border-box; 
} 
#marquee span { 
    display: inline-block; 
    padding-left: 100%; 
    animation: marquee 15s linear infinite; 
} 
@keyframes marquee { 
    0%   { transform: translate(-100%, 0); } 
    100% { transform: translate(0, 0); } 
}

<form> 
  <label for="input">Введите строку:</label><br> 
  <input type="text" id="input"> 
  <input type="button" id="button" value="Жми!"> 
</form> 
<div id="marquee"></div>

var line = '',  
speedPrint = 200,  
speedTicker = 20,  
i = 0,  
l = 0,  
back = false,  
ticker = document.getElementById('ticker'),  
input = document.getElementById('text'),  
end = function () { 
    w = document.body.clientWidth; 
    ticker.style.position = 'relative'; 
    if (!back && l < w) { 
        l += 5; 
        ticker.style.left = l + 'px'; 
    } else { 
        if (0 === l || 0 > l) { 
            l = 0; 
            back = false; 
            ticker.style.left = '0px'; 
        } else { 
            back = true; 
            l -= 5; 
            ticker.style.left = l + 'px'; 
        } 
    } 
    setTimeout(end, speedTicker); 
},  
text = function () { 
    if (!(line = input.value)) { 
        input.focus(); 
        return; 
    } 
    setTimeout(run, 200); 
},  
run = function () { 
    if (i < line.length) { 
        i++; 
        ticker.innerText = line.substring(0, i); 
        setTimeout(run, speedPrint); 
    } else { 
        end(); 
    } 
};

<span id="ticker"></span> 
<hr> 
<input name="text" type="text" id="text"> 
<a href="javascript:text()"> 
   Побежали 
</a>