CSS 动画面临的问题

我正在尝试创建一个几秒钟后会淡入视图的文本，但我遇到了问题。淡入视图工作正常，但文本在显示后几乎立即消失。其次，我需要这个动画以延迟的方式工作，但是当我设置延迟时，它似乎没有任何区别。早些时候，延迟工作得很好。

为什么动画显示后不久就消失了？我应该怎么做才能正确显示？为什么延迟现在不起作用？请帮我。解决方案一定很简单，但我可能没有沿着正确的思路思考。

下面是我的代码。

HTML:

<div id="container" class="container">
    <span class="fadeText">Sample Text</span>
</div>

CSS:

.container{
    margin: 5% auto;
    position: relative;
    text-align: center;
}
.fadeText{
    color: #5B83AD;
    font-weight: bold;
    font-size: 125%;
    border-radius: 4px;
    border: 1px solid #5B83AD;
    padding: 4px;
    text-align: center;
    opacity: 0;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation: fadeIn 5s ease-in;
    -moz-animation: fadeIn 5s ease-in;
    animation: fadeIn 5s ease-in;
}

/* Animations */
@-moz-keyframes fadeIn{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* End of Animations */

Fiddle: http://jsfiddle.net/hg4Xy/ http://jsfiddle.net/hg4Xy/

注意：我只提取了代码的相关部分并发布在这里。

Set animation-fill-mode to forwards。目前你的动画执行得很好，但它会回到原来的状态（即opacity: 0）在最后一个关键帧执行后。将填充模式设置为forwards将使文本保留最后一个关键帧设置的不透明度（即opacity: 1). 或者，你可以删除opacity: 0财产来自.fadeText.

-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards; /* always use standard un-prefixed version as last */

Set the animation-delay之后animationCSS 中的属性。目前正在设置之前animation财产和自animation简写属性不指定任何被覆盖的延迟。或者，修改简写属性，如下所示。

-webkit-animation: fadeIn 5s ease-in;
-moz-animation: fadeIn 5s ease-in;
animation: fadeIn 5s ease-in;
/* set delay after animation */
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
animation-delay: 5s;

/* addresses both items. 4th parameter is for delay and 5th is for fill mode */
-webkit-animation: fadeIn 5s ease-in 5s forwards;
-moz-animation: fadeIn 5s ease-in 5s forwards;
animation: fadeIn 5s ease-in 5s forwards;

工作演示 http://jsfiddle.net/hari_shanx/EgEVb/