Pure CSS Ticker (Horizontal)

index.html

<h1>Pure CSS Ticker (No-JS)</h1>
<h2>A smooth horizontal news like ticker using CSS transform on infinite loop</h2>

<div class="ticker-wrap">
<div class="ticker">
  <div class="ticker__item"><img src="http://ichef-1.bbci.co.uk/news/235/cpsprodpb/16663/production/_92374719_mediaitem92374348.jpg" width="100" > Letterpress chambray brunch.</div>
  <div class="ticker__item"><img src="http://ichef-1.bbci.co.uk/news/235/cpsprodpb/16663/production/_92374719_mediaitem92374348.jpg" width="100" > Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
  <div class="ticker__item"><img src="http://ichef-1.bbci.co.uk/news/235/cpsprodpb/16663/production/_92374719_mediaitem92374348.jpg" width="100" > Ugh PBR&B kale chips Echo Park.</div>
  <div class="ticker__item"><img src="http://ichef-1.bbci.co.uk/news/235/cpsprodpb/16663/production/_92374719_mediaitem92374348.jpg" width="100" > Gluten-free mumblecore chambray mixtape food truck. </div>
  <div class="ticker__item">Authentic bitters seitan pug single-origin coffee whatever.</div>
  <div class="ticker__item">Letterpress chambray brunch.</div>
  <div class="ticker__item">Vice mlkshk crucifix beard chillwave meditation hoodie asymmetrical Helvetica.</div>
  <div class="ticker__item">Ugh PBR&B kale chips Echo Park.</div>
  <div class="ticker__item">Gluten-free mumblecore chambray mixtape food truck. </div>
  <div class="ticker__item"><img src="http://ichef-1.bbci.co.uk/news/235/cpsprodpb/16663/production/_92374719_mediaitem92374348.jpg" width="100" > Authentic bitters seitan pug single-origin coffee whatever.</div>
</div>
</div>

pure-css-ticker-horizontal.markdown

Pure CSS Ticker (Horizontal)

This pure css ticker solves lots of pain with horizontal tickers on an infinite loop. Even JavaScript ticker solutions seem to let you down with the final effect found here. Duration is the only variable required (based on number of items).

A Pen by Duncan Booth on CodePen.

License.

script.js

/* 
 * Pure CSS Horizontal Ticker
 * Look no JS 
 */

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$duration: 30s;

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

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

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

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

.ticker-wrap {
  
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 4rem;
  background-color: rgba(#000, 0.9); 
  padding-left: 100%;  // offset items to begin 
  
}

.ticker {
    
  display: inline-block;
  height: 4rem;
  line-height: 4rem;  
  white-space: nowrap; // display items in a line
  padding-right: 100%; // ensure items go before animations repeat (taken from parent due to inline-block)
  
  -webkit-animation-iteration-count: infinite; 
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
 -webkit-animation-name: ticker;
         animation-name: ticker;
  -webkit-animation-duration: $duration;
          animation-duration: $duration;
  
  &__item {
    
    display: inline-block;
    
    padding: 0 2rem;
    font-size: 2rem;
    color: white;   
    
  }
  
}




body { padding-bottom: 5rem; }
h1,h2,p {padding: 0 5%;}

I get same problem as @murchie85.