SCSS
@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); }
}
}
