#center
  #container
    - var n = 10; // Number of numbers
    while n > 0
      .n= --n
View Compiled
@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); }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js