html - 无法弄清楚为什么每个跨度在动画期间重叠

Question

基本上只是尝试制作一个在 0 和 o 之间反复切换而不重叠的动画。

有什么想法吗？

https://jsfiddle.net/ckfoch7v/

.rw-words-1 span{
animation: rotateWordsFirst 0.3s linear 0s infinite;
left: 11px;
top: 2px;
}


.rw-words span:nth-child(2) { 
    animation-delay: 0.2s; 

}
.rw-words span:nth-child(3) { 
    animation-delay: 0.4s; 

}

.rw-words span:nth-child(4) { 
    animation-delay: 0.6s; 

}
.rw-words span:nth-child(5) { 
    animation-delay: 0.8s; 

}

.rw-words span:nth-child(6) { 
    animation-delay: 0.9s; 

}


@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: linear; height: 0px; }
    95% { opacity: 1;}
    98% { opacity: 0; }
}

Answer 1

尝试使用两个 span。

它会起作用。

HTML

   <div class="alien">  <span>\ /</span>
    <span>.</span>

        <section class="rw-wrapper">
            <div class="rw-sentence">
                <div class="rw-words rw-words-1">   
                  <span>0</span>
                  <span>o</span>
                 </div>
            </div>
        </section>
    </div>

Demo Here