.ticker-wrap {
  width: 100%;
  height: 70px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  position: relative;

}

.ticker {
  display: inline-block;
  
  animation: marquee 40s linear infinite;
  
}

.tricker-item {
  display: inline-block;
  padding: 0 1rem;
  font-size: 2rem;
  color: black;
  font-weight: 800;
  font-family: sans-serif;
  animation: swap 45s linear infinite;
  border: 2px dotted #aaa ;
  padding: 10px;
}

/* Transition */
@keyframes marquee {
  0% {
    transform: translateX(5%)
  }

  100% {
    transform: translateX(-100%)
  }
}

@keyframes swap {

  0%,
  50% {
    left: 0%;
  }

  50.01%,
  100% {
    left: 100%;
  }
}

/*
/* Specifying the name for animation keyframes and keyframes themselves 
@keyframes customticker {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
*/


/* Formatting the full-width ticker wrapper background and font color 
#tickerwrap {
  width: 100%;
  overflow: hidden;
}
*/

/* Formatting the ticker content background, font color, padding and exit state 
#ticker {
  display: inline-block;
  height: 4rem;
  box-sizing: content-box;
  padding-bottom:30px;
  font-size:28px;
  white-space: nowrap;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: customticker;
  animation-name: customticker;
  -webkit-animation-duration: 50s;
  animation-duration: 50s;
}
*/