CSS3 动画在 Chrome 中表现不同

Question

我在 Chrome 浏览器中遇到问题，无法让我的动画正常工作。在页面加载时，rw-words-1 中的第一个跨度由于某种原因总是在其定位中关闭。在页面加载时在网站上，它应该看起来像...

构建“一些文本 1”设计为“某个词 1”

然后我放在引号中的单词应该会淡出，新单词会弹出，就像...

构建“一些文本 2”设计为“某个词 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

好吧...我只是更改了一些代码并添加了一些边距/ float ，它现在适用于所有浏览器。仍然不确定为什么 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;
}