CSS3 - 几秒钟后显示一个元素

Question

I'm using a pure CSS3 AJAX loader animation, however, I'm hoping to modify it a little.

Currently it just spins several balls in a circle, however, I'd like to display a message after about 30 seconds to please continue waiting and after about 60 seconds display another message that things might have failed.

Is it possible to accomplish this with pure CSS3? Or would JavaScript be required to get this done?

Answer 1

this is a pure CSS3 animation effect JSFiddle

.animate {
    -webkit-animation: NAME-YOUR-ANIMATION 60s;
    -moz-animation: NAME-YOUR-ANIMATION 60s;
    -o-animation: NAME-YOUR-ANIMATION 60s;
    animation: NAME-YOUR-ANIMATION 60s;
    opacity: 0;
}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-o-keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes NAME-YOUR-ANIMATION {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

you'll need to do the same for the other message, the vendor css are important if you want it to work for all browsers.

Sources