自动滚动和循环内容DIV

<div id="scrollingDiv">
  <ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
  </ul>
</div>

#scrollingDiv {
  height: 200px;
  overflow: hidden;
}

#scrollingDiv ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  animation: scroll 10s infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(-100%);
  }
  75% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0);
  }
}

window.onload = function() {
  var scrollingDiv = document.getElementById("scrollingDiv");
  var ul = scrollingDiv.querySelector("ul");
  var liHeight = ul.querySelector("li").offsetHeight;
  var totalHeight = liHeight * ul.children.length;
  scrollingDiv.style.height = liHeight + "px";
  ul.style.height = totalHeight + "px";
}