Как анимировать текст с помощью CSS? ⇐ CSS

[Anonymous]

Я пытаюсь создать анимацию, соответствующую этой ссылке, но мне кажется, что она использует какой-то продвинутый CSS.

Код: Выделить всё

.header {
display: inline-block;
font-family: sans-serif;
}

.header span {
display: inline-block;
opacity: 0;
transform: translateY(-30px);
animation: fadeInDown 1s forwards;
}

.header span:nth-child(1)  { animation-delay: 0.1s; }
.header span:nth-child(2)  { animation-delay: 0.2s; }
.header span:nth-child(3)  { animation-delay: 0.3s; }
.header span:nth-child(4)  { animation-delay: 0.4s; }
.header span:nth-child(5)  { animation-delay: 0.5s; }
.header span:nth-child(6)  { animation-delay: 0.6s; }
.header span:nth-child(7)  { animation-delay: 0.7s; }
.header span:nth-child(8)  { animation-delay: 0.8s; }
.header span:nth-child(9)  { animation-delay: 0.9s; }
.header span:nth-child(10) { animation-delay: 1s; }
.header span:nth-child(11) { animation-delay: 1.1s; }
.header span:nth-child(12) { animation-delay: 1.2s; }
.header span:nth-child(13) { animation-delay: 1.3s; }
.header span:nth-child(14) { animation-delay: 1.4s; }
.header span:nth-child(15) { animation-delay: 1.5s; }
.header span:nth-child(16) { animation-delay: 1.6s; }

@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

Код: Выделить всё

Text
 
to
 
be
 
animated.

Редактировать: мне удалось заставить его работать, применив FadeInDown анимация, но она работает не так, как я ожидал.
ссылка
Как мне добиться желаемого результата анимации? В настоящее время расстояние между словами слишком велико, а анимация выглядит не очень хорошо.

Подробнее здесь: https://stackoverflow.com/questions/790 ... -using-css