1

http://jsfiddle.net/L7pV9/embedded/result/

我为那些想要查看示例的人添加了一个 jSfiddle

无论如何，我一生都无法弄清楚我的 CSS3 动画发生了什么。我有两个跨度类，其中一个标记为 Text1，另一个标记为 Text2。

因此，当动画运行时，单词会淡出，然后第二个标签会淡入，反之亦然。问题是在动画的第二次运行时 label1 将再次生成，但只是一小会儿，因为 label 2 似乎与它重叠/吃掉了它。如何阻止动画看起来有问题，以及标签均匀地重新生成？

看起来当 text2 完成时，它调用了 text1，但 text1 并没有持续那么久，它只是一遍又一遍地做。

这是代码。CSS

.logoText{
    display: inline;
    padding: 3px 0 0 0;
}
.logoText span {
    background: #0c0d0f;
    padding-right: 100px;
    position: absolute;
    opacity: 0;
    overflow: hidden;
    float: left;

    color: #6f6f6f;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;

    -webkit-animation: fadeText 10s linear infinite 0s;
    -moz-animation: fadeText 10s linear infinite 0s;
    -o-animation: fadeText 10s linear infinite 0s;
    -ms-animation: fadeText 10s linear infinite 0s;
    animation: fadeText 10s linear infinite 0s;

}
.logoText span:first-child {
    background: #0c0d0f;
}
.logoText span:nth-child(2) { 
    background: #0c0d0f;
    -webkit-animation-delay: 5s; 
    -moz-animation-delay: 5s; 
    -o-animation-delay: 5s; 
    -ms-animation-delay: 5s; 
    animation-delay: 5s; 
}

CSS动画

@-webkit-keyframes fadeText {
0% { opacity: 0; -webkit-transform: translateY(-2px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
97% { opacity: 1; -webkit-transform: translateY(0px); } 
98% { opacity: 0; -webkit-transform: translateY(2px); } 
100% { opacity:0; -webkit-transform: translateY(2px); }
}

HTML

          <div class="logoText">
                <span>Text1</span>
                <span>Text2</span>
            </div>
4

1 回答 1

2

您以不均匀的方式分配时间，这就是您得到的：

@-webkit-keyframes fadeText {
    0% { opacity: 0; -webkit-transform: translateY(-2px); }
   10% { opacity: 1; -webkit-transform: translateY(0px); }
   97% { opacity: 1; -webkit-transform: translateY(0px); } 
   98% { opacity: 0; -webkit-transform: translateY(2px); } 
  100% { opacity:0; -webkit-transform: translateY(2px); }

}

将在 87% 的时间（从 10 到 97）获得完全不透明度；11% 的时间半透明，只有 2% 的时间完全透明。

然后，大多数时候你只看到前面的 div。

如果你想平均分配时间，比如 10% 的时间线到过渡，它会是：

@-webkit-keyframes fadeText {
    0% { opacity: 0; -webkit-transform: translateY(-2px); }
   10% { opacity: 1; -webkit-transform: translateY(0px); }
   50% { opacity: 1; -webkit-transform: translateY(0px); } 
   60% { opacity: 0; -webkit-transform: translateY(2px); } 
  100% { opacity: 0; -webkit-transform: translateY(2px); }
}

以与您开始时相同的状态结束也很好。可能是第一个 translateY 应该是正数 (2px) 吗？

于 2013-10-22T20:01:02.977 回答