CodePen

HTML

            
              <button>toggle overflow</button>

<div class="container">
  <ul>
    <li>No. 1</li>
    <li>No. 2</li>
    <li>No. 3</li>
    <li>No. 4</li>
    <li>No. 5</li>
  </ul>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
  margin:0;
  padding:0;
}

ul, li {
  list-style-type:none;
}

ul {
  height:200px;
  width:1000px;
  z-index:-100;
  position:relative;
  -webkit-animation:move 5s linear infinite;
     -moz-animation:move 5s linear infinite;
       -o-animation:move 5s linear infinite;
          animation:move 5s linear infinite;
}
@-webkit-keyframes move {
  0% { margin-left:0px; }
  100% {  margin-left:-800px; }
}
@-moz-keyframes move {
  0% { margin-left:0px; }
  100% {  margin-left:-800px; }
}
@-o-keyframes move {
  0% { margin-left:0px; }
  100% {  margin-left:-800px; }
}
@-keyframes move {
  0% { margin-left:0px; }
  100% {  margin-left:-800px; }
}
li {
  display:block;
  height:200px;
  width:200px;
  float:left;
  text-align:center;
  line-height:3;
}

li:nth-of-type(1) {
  background:#23382f;
}
li:nth-of-type(2) {
  background:#538c51;
}
li:nth-of-type(3) {
  background:#a25d00;
}
li:nth-of-type(4) {
  background:#f28705;
}
li:nth-of-type(5) {
  background:#f6cd5b;
}
.container {
  height:200px;
  width:200px;
  margin:20px auto 0;
  box-shadow:0 0 0 5px #222;
}
.overflow {
  overflow:hidden;
}
body {
  background:rgba(0,0,0,0.8);
}
button {
  position:relative;
  left:50%;
  margin:20px 0 0 -85px;
  font:lighter normal 18px/1 'helvetica';
  height:50px;
  width:170px;
  cursor:pointer;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function() {
    $('button').click(function() {
        $('.container').toggleClass('overflow');
    });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................