<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.