¿Cómo centrar horizontalmente varios elementos de intervalo giratorio en un div? - html, css

Estaba jugando con los fragmentos de código de https://codepen.io/amritleone/pen/qERPmW. Descargo de responsabilidad: he leído preguntas en stackoverflow sobre centrar tramos, pero este caso es ligeramente diferente. Los elementos span están girando con desvanecimiento en la animación.

Aquí está el HTML.

<div class="container">
<h1>A Community of</h1>
<div class="fadeIn">
<span>Aardvark</span>
<span>Bee</span>
<span>Caterpillar</span>
<span>Doggo</span>
<span>Elephant</span>
</div>
</div>

Aquí está el CSS hasta ahora. Usé text-align para div y display: inline-block para tramos. Sin embargo, los tramos parecen alineados no en el centro sino en un punto que comienza desde el centro. He incluido una imagen para referencia visual.

Bee no está en el centro. No soy muy hábil con el inglés, pero pregúnteme si mi descripción no es lo suficientemente clara.

.fadeIn{
line-height: 30px;
text-align: center;
}
.fadeIn span{
animation: fadeEffect 12.5s linear infinite 0s;
-ms-animation: fadeEffect 12.5s linear infinite 0s;
-webkit-animation: fadeEffect 12.5s linear infinite 0s;
font-family: ubuntu;
font-size: 25px;
opacity: 0;
display: inline-block;
overflow: hidden;
position: absolute;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
.container{
height: 100px;
}

Respuestas

Quizás para empezar, eliminaría el position: absolute; desde el .fadeIn span{}