Question

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

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

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

因此，当动画运行时，单词淡出，然后第二个标签淡入，反之亦然。问题是在动画label1的第二次运行中会再次产生，但只是一会儿，因为标签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-Animations

@-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>

Answer 1

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

@-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); }
}

以你开始的相同状态结束也会很好。可能是第一个翻译应该是正面的（2px）？

CSS3文本动画在重新启动时快速重叠第一个孩子

1 个答案: