animation delay not working

animation, css

Solution

You've specified the `-webkit` versions in the wrong order. The `-webkit-animation` replaces the delay rule that you just set up. Reverse the order so that the delay comes after.

-webkit-animation:fade-in 5s;
-webkit-animation-delay:15s;

You can avoid these issues if you always set a single attribute:

-webkit-animation-name: fade-in;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 15s;

Don't forget to also set:

opacity: 0;

Otherwise the text will be visible until the animation starts, and:

-webkit-animation-fill-mode: forwards;

So that the animated opacity is retained after fading in.

Problem

Okay, I have this text that I want to appear after 20s. I am using the animation-delay property but it is not working. Perhaps, I am doing something wrong. Please help me out to get to right track.. Here is my code.. ``` @import url(http://fonts.googleapis.com/css?family=Economica); #text{ font-family:'Economica', sans-serif; font-weight:bold; position:absolute; left:50%; top:50%; margin-left:-20px; margin-top:-25px; animation:fade-in 5s; animation-delay:15s; -webkit-animation-delay:15s; -webkit-animation:fade-in 5s; } @keyframes fade-in{ from { opacity:0;} to {opacity:1;} } @-webkit-keyframes fade-in{ from {opacity:0;} to {opacity:1;} } ``` Here is the link on Fiddle Thank You for everything! EDIT ONE: After changing the order of the animation properties, and adding the opacity:0 in the text, I got the following ``` #text{ font-family:'Economica', sans-serif; position:absolute; left:50%; top:50%; opacity:0; margin-left:-20px; margin-top:-25px; animation:fade-in 2s; animation-delay:3s; -webkit-animation:fade-in 2s; -webkit-animation-delay:3s; -o-animation:fade-in 2s; -o-animation-delay:3s; } @keyframes fade-in{ from { opacity:0;} to {opacity:1;} } @-webkit-keyframes fade-in{ from {opacity:0;} to {opacity:1;} } ``` But if I leave the opacity to 0 in the #text, the text will disappear once the animation is over. How can I keep the text visible after the animation is done?? Thank you!

Original source