A Pen by tibomahe

Thumbnail
This awesome code was written by tibomahe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tibomahe ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  tibomahe</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <ul>
  <li>
    <img src="http://www.placecage.com/200/300" alt="">
  </li>
  <li>
    <img src="http://www.placecage.com/200/300" alt="">
  </li>
  <li>
    <img src="http://www.placecage.com/200/300" alt="">
  </li>
  <li>
    <img src="http://www.placecage.com/200/300" alt="">
  </li>
  <li>
    <img src="http://www.placecage.com/200/300" alt="">
  </li>
  <li>
    <img src="http://www.placecage.com/200/300" alt="">
  </li>
</ul>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/tibomahe/a-pen-by-tibomahe-NYOxeP */
* {
  box-sizing: border-box;
}

.container {
  border: 1px solid red;
  width: 1250px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

ul {
  border: 1px solid green;
  width: 1764px;
  padding: 0;
}
ul li {
  list-style: none;
  float: left;
  width: 250px;
  border: 1px solid blue;
  text-align: center;
}
ul li:nth-child(1) {
  animation: slide1 10s infinite;
}

@keyframes slide1 {
  0% {
    transform: translateX(0);
    visibility: visible;
  }
  10% {
    transform: translateX(calc(250px * 5));
    visibility: hidden;
  }
  20% {
    transform: translateX(calc(250px * 4));
    visibility: visible;
  }
  30% {
    transform: translateX(calc(250px * 3));
  }
  40% {
    transform: translateX(calc(250px * 2));
  }
  50% {
    transform: translateX(calc(250px * 1));
  }
  60% {
    transform: translateX(0);
  }
}

Comments