CSS3动画在Chrome中表现不同

Question

我在Chrome浏览器中有问题，让我的动画正确工作。在页面加载时，由于某种原因，rw-words-1中的第一个span总是在其位置上关闭。在网站上，当页面加载时，它应该是…

创建"some text 1"设计为"some word 1"

然后我放在引号里的单词应该会淡出，而新的单词会像…

创建"some text 2"设计为"some word 2"

等，等等基于下面的HTML文件。问题是第二个和第三个跨度弹出在正确的位置，但第一个跨度总是混乱& &;出于某种原因，重叠了"设计给"的文本。它在Firefox/Safari中工作得很好。如有任何帮助，不胜感激。

前端HTML

<div class="slogan">
<h1 class="rw-sentence">
<span>Building</span>
<div class="rw-words rw-words-1">
  <span>some text 1...</span>
  <span>some text 2...</span>
  <span>some text 3...</span>
</div>
<br clear="all">
<span>designed to</span>
<div class="rw-words rw-words-2">
  <span>some word 1</span>
  <span>some word 2</span>
  <span>some word 3</span>
</div>
 </h1>
    <p>Some sub-slogan here</p>
 </div>

CSS:

/* ------ CSS ANIMATIONS ------- */
.rw-wrapper {
    width: 90%;
    padding: 10px;
}
.rw-sentence{
    text-align: left;
    position: relative;
}
.rw-sentence span {
    white-space: nowrap;
}
.rw-words {
    display: inline;
}
.rw-words span{
    position: absolute;
    opacity: 0;
    width: 100%;
    /* overflow: hidden; */
    font-weight: bold;
}
.rw-words.rw-words-1 span {
    margin-left: 0px;
}
/* -- WEIRD FIREFOX MARGIN HACK --*/
@-moz-document url-prefix() {
    .rw-words.rw-words-1 span {
        margin-left: 10px;
    }
}
.rw-words.rw-words-2 span {
    margin-left: 10px;
}
.rw-words-1 span{
    animation: rotateWordsSecond 18s linear infinite 0s;
    -webkit-animation: rotateWordsSecond 18s linear infinite 0s;
    -moz-animation: rotateWordsSecond 18s linear infinite 0s;
    -ms-animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words-2 span{
    animation: rotateWordsSecond 18s linear infinite 0s;
    -webkit-animation: rotateWordsSecond 18s linear infinite 0s;
    -moz-animation: rotateWordsSecond 18s linear infinite 0s;
    -ms-animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
    -webkit-animation-delay: 6s;
      -moz-animation-delay: 6s;
      -ms-animation-delay: 6s;
      animation-delay: 6s;
}
.rw-words span:nth-child(3) {
    -webkit-animation-delay: 12s;
      -moz-animation-delay: 12s;
      -ms-animation-delay: 12s;
      animation-delay: 12s;
}
@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@-webkit-keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 1; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 1; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
@-webkit-keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 1; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

Answer 1

嗯…我只是改变了&增加了一些边距/浮动&它现在可以在所有浏览器中运行。仍然不确定为什么chrome处理转换/代码从我原来的问题不同，虽然这是相当令人沮丧。如果有人知道，我仍然很想知道，因为我正在努力提高设计在所有浏览器上的一致性。谢谢,

.rw-words {
    display: inline;
    float: left;
}
.rw-words span{
    position: absolute;
    opacity: 0;
    width: 100%;
    /* overflow: hidden; */
    font-weight: bold;
}
.rw-words.rw-words-1 span {
    margin-left: 165px;
    font-weight: 480;
}
/* -- I REMOVED THE FIREFOX MARGIN HACK --*/
.rw-words.rw-words-2 span {
    margin-left: 234px;
    font-weight: 480;
}