Exemple d'un texte défilant de droite à gauche

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <title>Titre du document</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>C'est un texte défilant horizontalement sans la balise marquee.</p>
    </div>
  </body>
</html>