@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
   50% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(-150%, 0, 0);
    visibility: visible;
  }
  
  100% {
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-300%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
   50% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(-150%, 0, 0);
    visibility: visible;
  }
 
  100% {
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-300%, 0, 0);
  }
}
.ticker-wrap {
  
  margin: 15px auto;
  width: 40%;
  overflow: hidden;
  height: 1.5rem;
  background-color: rgba(0, 0, 0, 0.2);
  
}
.ticker {
  display: inline-block;
  height: 1.8rem;
  line-height: 1.8rem;
  white-space: nowrap;
  padding-right: 100%;
  -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: 300s;
  animation-duration: 300s;
}
.ticker__item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 1rem;
  color: gray;
}