1

我想连续淡入和淡出 div 内容中的文本，并且我想在两个短语之间交替（或者如果不可能在两个短语之间交替，至少连续淡入和淡出同一个短语）。下面我的代码不起作用（动态）：

'<div><div class="image-blockUI" /><div class="text-blockUI-container"><div class="text-blockUI">Loading...</div><div class="text-blockUI-2">Please, wait.</div></div></div>'

CSS：

.image-blockUI 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    width: 24px;
    background-image: url('../images/Edit.gif'); /* relative to the location where css file is */
}

.image-blockUI-container
{
    display: inline;
    width: 100px;
    height: 100px;
}

@-webkit-keyframes fade-in{
    from{
        opacity:1;
        top:0px;
    }
    to{
        opacity:0;
        top:-5px;
    }
}

.text-blockUI
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-top: 5px;
    text-align: center;

    display: inline;
    position: relative;
    top: 0px;
    -webkit-animation: fade-in 1s infinite;
}

.text-blockUI-2
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-top: 5px;
    text-align: center;

    opacity: 0;
    display: inline;
    position: relative;
    margin-left: -56px;
    -webkit-animation: fade-in 1s infinite;
    -webkit-animation-delay: 0.5s;
}

我试图做同样的解释here但没有成功（接受的解决方案）：

如何在 Droplr 上使用 CSS/jQuery 淡入/淡出多个文本？

什么要不断地淡入淡出并每次交替这两个短语？

4

1 回答 1

1

在每个元素上，设置一个足够长的持续时间以使两个元素的动画完成（在本例中为 4 秒）。在第二个元素上，设置延迟以均匀地错开时间。在第二个动画运行时创建允许“暂停”的关键帧：

  • 1 秒淡入（0% 到 25%）
  • 2 秒淡出（25% 到 75%）
  • 1 秒左右不可见，而其他元素可见（75% 到 100%）

这是一个带有诸如加载微调器之类的装饰的 CodePen 。

这是只包含基本要素的精简代码：

<div class="text-blockUI-container">
    <span class="text-blockUI">Loading&hellip;</span>
    <span class="text-blockUI-2">Please wait.</span>
</div>

<style>
.text-blockUI-container {
    position: relative;
}

.text-blockUI {
    position: relative;
    -webkit-animation: fadeInOut 4s infinite;
    animation: fadeInOut 4s infinite;
}

.text-blockUI-2 {
    opacity: 0;
    position: absolute;
    left: 0;
    -webkit-animation: fadeInOut 4s 2s infinite;
    animation: fadeInOut 4s 2s infinite;
}

@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
        top: -.5em;
    }
    25% {
        opacity: 1;
        top: 0;
    }
    75% {
        opacity: 0;
        top: .5em;
    }
    100% {
        opacity: 0;
        top: .5em;
    }
}
@keyframes fadeInOut {
    0% {
        opacity: 0;
        top: -.5em;
    }
    25% {
        opacity: 1;
        top: 0;
    }
    75% {
        opacity: 0;
        top: .5em;
    }
    100% {
        opacity: 0;
        top: .5em;
    }
}
</style>
于 2013-12-06T06:15:42.577 回答