Facing Issues with CSS Animation

Question

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.

The below is my code.

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/

Note: I have extracted only the relevant portion of the code and posted here.

Harry · Accepted Answer · 2013-08-23 04:14:20Z

2

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

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;

Working Demo

edited Aug 23, 2013 at 4:14

answered Aug 23, 2013 at 3:57

Harry

90.1k26 gold badges216 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2700358 Over a year ago

wow thanks a lot for the detailed explanation. The delay was initally written in shorthand and I changed it for some reason, silly me :(

Collectives™ on Stack Overflow

Facing Issues with CSS Animation

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related