<dl>
  <dt>0</dt>
  <dd>Start on top and around you go. That's how you make a zero!</dd>
  <dt>1</dt>
  <dd>Go straight down and then you're done. That's the way to make a one.</dd>
  <dt>2</dt>
  <dd>Make a candy cane and then a shoe. That's the way to make a two!</dd>
  <dt>3</dt>
  <dd>Around a tree. Around a tree. That's the way to make a three!</dd>
  <dt>4</dt>
  <dd>Down, across, and down some more. That is how you make a four!</dd>
  <dt>5</dt>
  <dd>Take a drive. Swim around. To make a five come back to the ground.</dd>
  <dt>6</dt>
  <dd>Slide down and around to pick up sticks. That is the way to make a six.</dd>
  <dt>7</dt>
  <dd>Straight across and down from heaven. That is how you make a seven!</dd>
  <dt>8</dt>
  <dd>Make an S but don't just wait. Come back up to make an eight!</dd>
  <dt>9</dt>
  <dd>Make a loop and then a line. That's the way to make a nine!</dd>
</dl>
@import url('https://fonts.googleapis.com/css?family=Alata&display=swap');

$count: 10;
$multiplier: 4.5s;
$ease1: cubic-bezier(0.23, 1, 0.32, 1);
$ease2: cubic-bezier(0.19, 1, 0.22, 1);
$colors: #00A8E8, #F2BB05, #84A07C, #E05263, #465362, #593C8F, #9E0059, #357266, #11B5E4, #59FFA0;

body {
  margin: 0;
  background-color: #00171f;
  font-family: 'Alata', sans-serif;
}

dl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  color: whitesmoke;

  * {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
  }
}

dt {
  --size: 20vmin;

  bottom: 50%;
  width: var(--size);
  height: var(--size);
  font-size: calc(var(--size) - 4vmin);
  opacity: 0;
  transform: translateY(100%);
  animation: dt ($count * $multiplier) $ease1 infinite;
  
  &:after {
    content: '';
    position: absolute;
    top: 1vmin;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform-origin: 50% 100%;
    animation: dt-pseudo ($count * $multiplier) $ease2 infinite;
  }

  @for $i from 0 to $count {    
    &:nth-child(#{$i * 2 + 1}) {
      &, &:after { animation-delay: $i * $count * ($multiplier / 10) }
      &:after { background-color: nth($colors, $i + 1) }
    }
  }
}

dd {
  --size: 5vmin;

  top: 55%;
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 70vmin;
  font-size: calc(var(--size) - 1vmin);
  line-height: 1.2;
  opacity: 0;
  transform: translateY(80%);
  animation: dd ($count * $multiplier) $ease2 infinite;

  @for $i from 0 through $count {
    &:nth-child(#{$i * 2 + 2}) {
      animation-delay: $i * $count * ($multiplier / 10);
    }
  }
}

@keyframes dt {
  @for $i from 1 through $count {
    $anim: $count * ($i / 4);

    @if $i == 1 {
      #{$anim}% { transform: translateY(0); opacity: 1; }
    } @else if $i == 2 {
      #{$anim}% { transform: translateY(0); opacity: 1; }
    } @else if $i == 3 {
      #{$anim}% { transform: translateY(2%); opacity: 0; }
    }
  }
}

@keyframes dt-pseudo {
  @for $i from 1 through $count {
    $anim: $count * ($i / 4);

    @if $i == 1 {
      #{$anim}% { transform: scale(1, 0.1); }
    } @else if $i == 2 {
      #{$anim}% { transform: scale(1, 0.1); }
    } @else if $i == 3 {
      #{$anim}% { transform: scale(0, 0.1); }
    }
  }
}

@keyframes dd {
  @for $i from 1 through $count {
    $anim: $count * ($i / 2);

    @if $i == 1 {
      #{$anim}% { transform: translateY(0); opacity: 1; }
    } @else if $i == 2 {
      #{$anim}% { transform: translateY(2%); opacity: 0; }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.