Création des glissières d'Image en Utilisant Uniquement CSS3

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Glissière de l'image</title>
    <style>
      body {
        margin: 10px auto;
        text-align: center;
      }
      .content {
        max-width: 800px;
        text-align: left;
        margin: auto;
      }
      .simple-ss {
        width: 800px;
        height: 250px;
        background-color: #eeeeee;
        margin: auto;
        background-image: url("https://imgur.com/download/OtK7XDW");
        animation-name: slide;
        animation-duration: 10s;
        animation-direction: normal;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
      }
      @keyframes diapo {
        0% {
          background-position: 0 0;
        }
        16.66% {
          background-position: 0 0;
        }
        33.32% {
          background-position: -800px 0;
        }
        49.98% {
          background-position: -800px 0;
        }
        66.64% {
          background-position: -1600px 0;
        }
        83.30% {
          background-position: -1600px 0;
        }
        100% {
          background-position: 0 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="simple-ss"></div>
    <div class="content">
      <p>Ceci est une preuve de concept pour un diaporama qui n'utilise pas de Javascript. Il n'a pas de pages ni de boutons gauche / droite, etc.</p>
    </div>
  </body>
</html>