div에 회전하는 여러 스팬 요소를 가로로 가운데에 배치하는 방법은 무엇입니까?

Question

https://codepen.io/amritleone/pen/qERPmW의 코드 스 니펫으로 놀고있었습니다. 면책 조항 : 스팬 오버에 대한 stackoverflow에 대한 질문을 읽었지만이 경우는 약간 다릅니다. 스팬 요소는 애니메이션에서 페이드와 함께 회전합니다.

여기에 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> 

여기까지의 CSS가 있습니다. div에 text-align을 사용하고 span에 대한 인라인 블록을 표시했습니다. 그러나 스팬은 센터에서 시작하는 것이 아니라 센터에서 시작하는 포인트와 같은 것처럼 보입니다. 나는 시각적 인 참조를 위해 그림을 포함시켰다.

꿀벌은 중심에 있지 않습니다. 나는 영어로 발음하지는 않지만 내 설명이 불분명한지 묻습니다.

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

Answer 1

아마도 시작, 나는 귀하의 회신에 대한 .fadeIn span{}