Infinite Scrolling Background

index.html

<section class="pen">
<div class="panel top">
  <h1>Animate: background-position</h1>
</div>
<div class="panel bottom">
  <h1>Animate: translate3d</h1>
  <div class="scroll"></div>
</div>
</section>

infinite-scrolling-background.markdown

Infinite Scrolling Background

Testing the difference in performance when trying to animate a background pattern. Top pane uses a keyframe to animate background-position property. Bottom pane uses an absolutely positioned element and animates using translate3d. Bottom pane much smoother in my tests.

A Pen by Josh Scarbrough on CodePen.

License.

style.scss

@import "bourbon";
*, *:before, *:after {
    box-sizing: border-box;
}
@include keyframes(scrollBad) {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -320px;
  }
}
@include keyframes(scrollGood) {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(0,-320px,0);
  }
}
.pen {
  background-color: blue;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.panel {
  padding: 3rem;
  height: 50%; 
}
.top {
  background-color: #3E69C3;
  background-image: url(http://scarbroughstudios.com/img/codepen.svg);
  background-position: center center;
  background-size: 500px;  
  @include animation(scrollBad 5s linear infinite);
}
.bottom {
  background-color: #31CC70;
  overflow: hidden;
  position: relative;
  
  .scroll {
    background-image: url(http://scarbroughstudios.com/img/codepen.svg);
    background-position: center center;
    background-size: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 400%;
    width: 100%;
    z-index: 1;
    @include animation(scrollGood 5s linear infinite);
  }
}
h1 {
  color: white;
  font-weight: 400;
  font-family: sans-serif;
  margin: 0;
  position: relative;
  z-index: 2;
}