Comment centrer horizontalement plusieurs éléments d'envergure en rotation dans un div? - html, css

Je jouais avec les extraits de code de https://codepen.io/amritleone/pen/qERPmW. Avis de non-responsabilité: j'ai lu des questions sur stackoverflow sur les plages de centrage, mais ce cas est légèrement différent. Les éléments span tournent avec un fondu en animation.

Voici le 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>

Voici le CSS jusqu'à présent. J'ai utilisé text-align pour div et display: inline-block pour les travées. Cependant, les travées semblent être alignées non pas au centre mais à un point partant du centre. J'ai inclus une image pour référence visuelle.

L'abeille n'est pas au centre, je ne parle pas très bien l'anglais mais n'hésitez pas à me demander si ma description n'est pas assez claire.

.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;
}

Réponses:

Peut-être pour commencer, je supprimerais le position: absolute; du .fadeIn span{}