SOURCE

<div id="center">
  <div id="container">
    <div class="n">9</div>
    <div class="n">8</div>
    <div class="n">7</div>
    <div class="n">6</div>
    <div class="n">5</div>
    <div class="n">4</div>
    <div class="n">3</div>
    <div class="n">2</div>
    <div class="n">1</div>
    <div class="n">0</div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

$primary-color: #F1E3F3;
$background-color: #3590F3;

$n: 10; // Number of numbers
$animation_duration: $n * 1s;

$size: 200px; // Width, height, font-size and line-height

html {
  font-family: 'Roboto', sans-serif;
  color: $primary-color;
  background-color: $background-color;
}

#center {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -$size/2;
  margin-top: -$size/2;
}

#container {
  position: absolute;
  width: $size;
  height: $size;
  perspective: 300px;
}

.n {
  position: absolute;
  top: 0px;
  left: 0px;
  width: $size;
  height: $size;
  transform: rotateY(90deg);
  
  text-align: center;
  font-size: $size;
  line-height: $size;
  user-select: none;
}

@for $i from 1 through $n {
  .n:nth-of-type(#{$i}) {
    animation: animate_#{$i} $animation_duration ease-in-out infinite;
  }
  
  @keyframes animate_#{$i} {
    0%                     { transform: rotateY( 90deg); }
    #{100%/$n*($i - 1)}    { transform: rotateY( 90deg); }
    #{100%/$n*($i - 0.5)}  { transform: rotateY(  0deg); }
    #{100%/$n*($i)}        { transform: rotateY(-90deg); }
    100%                   { transform: rotateY(-90deg); }
  }
}