.counter ul {
  display: inline-block;
  padding: 0;
  width: 35px;
  height: 35px;
  font-size: 30px;
  line-height: 35px;
  font-weight: bold;
  font-family: sans-serif;
  list-style-type: none;
  box-sizing: content-box;
}

.counter ul li {
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  line-height: 1.2;
  text-align: center;
  width: inherit;
  animation: dial 10s cubic-bezier(0.9, 0, 0.9, 0) infinite;
}

.counter ul li:nth-child(1)  { animation-delay:  0s; }
.counter ul li:nth-child(2)  { animation-delay: -9s; }
.counter ul li:nth-child(3)  { animation-delay: -8s; }
.counter ul li:nth-child(4)  { animation-delay: -7s; }
.counter ul li:nth-child(5)  { animation-delay: -6s; } 
.counter ul li:nth-child(6)  { animation-delay: -5s; }
.counter ul li:nth-child(7)  { animation-delay: -4s; }
.counter ul li:nth-child(8)  { animation-delay: -3s; }
.counter ul li:nth-child(9)  { animation-delay: -2s; }
.counter ul li:nth-child(10) { animation-delay: -1s; }

.counter ul.reverse li {
  animation-direction: reverse;
}

.counter ul.smooth li {
  animation-timing-function: cubic-bezier(0.79, 0.14, 0.15, 0.86);
}

@keyframes dial {
  10% {
    top: 44px;
    -webkit-transform: rotateX(36deg);
            transform: rotateX(36deg);
  }
  20% {
    top: 71px;
    -webkit-transform: rotateX(72deg);
            transform: rotateX(72deg);
  }
  30% {
    top: 71px;
    -webkit-transform: rotateX(108deg);
            transform: rotateX(108deg);
  }
  40% {
    top: 44px;
    -webkit-transform: rotateX(144deg);
            transform: rotateX(144deg);
  }
  50% {
    top: 0px;
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  60% {
    top: -45px;
    -webkit-transform: rotateX(144deg);
            transform: rotateX(144deg);
  }
  70% {
    top: -72px;
    -webkit-transform: rotateX(108deg);
            transform: rotateX(108deg);
  }
  80% {
    top: -72px;
    -webkit-transform: rotateX(72deg);
            transform: rotateX(72deg);
  }
  90% {
    top: -45px;
    -webkit-transform: rotateX(36deg);
            transform: rotateX(36deg);
  }
  0%, 100% {
    top: 0px;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}