Exemple d'un texte défilant en bas en haut

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <title>Titre du document</title>
  <head>
    <style>
      div {
        background-color: #1c87c9;
        color: #fff;
        text-align: center;
      }
      p {
        padding-top: 100%;
        -moz-animation: marquee 5s linear infinite;
        -webkit-animation: marquee 5s linear infinite;
        animation: marquee 5s linear infinite;
      }
      @-moz-keyframes marquee {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(0, -100%);
        }
      }
      @-webkit-keyframes marquee {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(0, -100%);
        }
      }
      @keyframes marquee {
        0% {
          -moz-transform: translate(0, 0);
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
        }
        100% {
          -moz-transform: translate(0, -100%);
          -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
        }
      }
    </style>
  </head>
  <body>
    <div>
      <p>C'est un texte défilant verticalement sans la balise marquee.</p>
    </div>
  </body>
</html>