Question

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

构建＆＃34;一些文字1＆＃34; 旨在＆＃34;某些单词1＆＃34;

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

构建＆＃34;一些文字2＆＃34; 旨在＆＃34;某些单词2＆＃34;

等基于下面的html文件。问题是正确定位的第二和第三跨度弹出，但第一跨距总是混乱和放大重叠＆＃34;设计为＆＃34;由于某种原因的文字。它在Firefox / Safari中工作正常。任何帮助将不胜感激。

FRONT-END 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

嗯......我刚刚更改了一些代码和＆amp;增加了一些利润/浮动＆amp;它现在适用于所有浏览器。仍然不确定为什么chrome对我的原始问题的转换/代码进行了不同的处理，尽管这非常令人沮丧。如果有人知道，我仍然喜欢知道，因为我试图在所有浏览器中保持一致的设计。 THX，

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

CSS3动画在Chrome中表现不同

1 个答案: