Анимация постепенного исчезновения для трех разных текстовых CSS ⇐ CSS

[Anonymous]

Я хотел бы использовать этот CSS-код постепенного появления и исчезновения в трех разных текстах, но он работает только с двумя разными текстами.
HTML:
text 1
text 2
text 3

CSS
.nametag{
position: absolute;
}

.nametag:nth-child(1){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate-reverse;
}

.nametag:nth-child(2){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}

@keyframes fade{
0%,45% {
opacity: 0;
}
100%{
opacity: 1;
}
}


Подробнее здесь: https://stackoverflow.com/questions/718 ... t-text-css