Как создать эффект marquee без использования тега <marquee> (с помощью CSS, JavaScript и jQuery)

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <title>Заголовок документа</title>
  <head>
    <style>
      div {
      background-color: #1c87c9;
      color: #fff;
      padding: 5px;
      }
      p {
      -moz-animation: marquee 10s linear infinite;
      -webkit-animation: marquee 10s linear infinite;
      animation: marquee 10s linear infinite;
      }
      @-moz-keyframes marquee {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
      }
      @-webkit-keyframes marquee {
      0% { transform: translateX(100%); }
      100% { transform: translateX(-100%); }
      }
      @keyframes marquee {
      0% { 
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%) }
      100% { 
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%); }
      }
    </style>
  </head>
  <body>
    <div>
      <p>Горизонтально прокручиваемый текст без использования тега  marquee.</p>
    </div>
  </body>
</html>