面对CSS动画的问题 [英] Facing Issues with CSS Animation

问题描述

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

I am trying to create a text that would fade into view after a few seconds but I am facing problems. The fade into view is working fine but the text disappears almost immediately after it is shown. Secondly I need this animation to work in a delayed manner but when I set the delay it doesn't seem to make any difference. The delay was working fine earlier.

为什么动画在显示后不久就会消失？我应该怎么做才能使它正确显示？为什么延迟现在不工作？请帮帮我。解决方案必须简单，但我可能不是沿着正确的方向思考。

Why does the animation disappear shortly after it is shown? What should I do to get it displayed correctly? Why is the delay not working now? Please help me. The solution must be simple but I am probably not thinking along the right line.

以下是我的代码。

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 */

小提琴： http://jsfiddle.net/hg4Xy/

注意：

推荐答案

设置 animation-fill-模式到转发。目前你的动画执行得很好，但是在最后一个关键帧被执行之后它会进入它的原始状态（ opacity：0 ）。设置填充模式为转发会使文本保留最后一个关键帧设置的不透明度（ opacity：1 ）。 或者，可以从 .fadeText 中删除​​ opacity：0 属性。

Set animation-fill-mode to forwards. Currently your animation is executing fine but it is going to its original state (which is opacity: 0) after the last key-frame is executed. Setting fill-mode to forwards would make the text retain the opacity set by the last key-frame (which is opacity: 1). Alternatively, you can remove the opacity: 0 property from .fadeText.

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

设置在CSS中的动画属性后面的animation-delay 。目前它被设置在动画属性之前，并且由于动画 short-hand属性没有指定任何延迟正在被覆盖。 或修改短手属性，如下所示。

Set the animation-delay after the animation property in the CSS. Currently it is being set before the animation property and since the animation short-hand property doesn't specify any delay it is getting over-written. Alternatively, modify the short-hand property as shown below.

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

工作演示

这篇关于面对CSS动画的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！