*{

  padding:0;margin:0;

}

li{

  list-style:none;

}

​

body, html {

  width: 100%;

  height: 100%;

  display: flex;

}

​

:root {

  --w: 300;

  --speed: 1s;

}

​

.g-container {

  width: 300px;

  margin: auto;

  height: 36px;

  line-height: 36px;

  font-size: 20px;

  background: #673ab7;

  color: #fff;

  overflow: hidden;

  border: 2px solid #000;

}

​

ul {

  display: flex;

  flex-wrap: nowrap;

}

​

ul li {

  flex-shrink: 0;

  width: 100%;

  height: 100%;

  box-sizing: border-box;

  padding-left: 10px;

  box-sizing: border-box;

}

​

ul {

  animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;

}

​

ul li {

  white-space: nowrap;

  cursor: pointer;

  animation: liMove calc(var(--speed)) infinite;

}

​

@keyframes move {

  0% {

    transform: translate(0, 0);

  }

  100% {

    transform: translate(calc(var(--s) * var(--w) * -1px), 0);

  }

}

​

@keyframes liMove {

  0% {

    transform: translate(0, 0px);

  }

  80%,

  100%  {

    transform: translate(calc(var(--w) * -1px), 0);

  }

}

​