CSS3 animation 實現無限循環滾動

內容區域重複一份，使用 animation 平移，平移結束後瞬間切回原始狀態。達到無線循環滾動的效果。

預覽

在線預覽

實現

<div class="father">
  <div class="son">
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
  </div>
  <div class="son">
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
  </div>
</div>

@keyframes rowup {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(0, -120px, 0);
    transform: translate3d(0, -120px, 0);
  }
}

.father {
  height: 120px;
  overflow: hidden;
  border: 1px solid #000;
}

.son {
  height: 120px;
  border: 1px solid #000;
  box-sizing: border-box;

  -webkit-animation: 2s rowup linear infinite normal;
  animation: 2s rowup linear infinite normal;
}

whosmeya.com